如何在 Flutter 中更改 AppBar() 的宽度？

Question

我想为 flutter web 重用移动应用程序代码。我已经在所有屏幕的脚手架中使用 AppBar() 和 body 小部件进行了编码。现在我为网页取了400的宽度和中心，除了appbar之外都很好。

        Scaffold(
        appBar: this.getAppBarWidget(),
        body: Center(
          child: Container(
            width: kIsWeb ? 400.0 : MediaQuery.of(context).size.width,
            child: this.getBodyWidget(),
          ),
        ))

以上代码完美适用于移动和网络的所有屏幕，但网络中的应用栏除外。

如何更改应用栏的宽度以适合宽度 400？

如果我使用 Size.fromWidth(400) 出现错误。

以下代码适用于移动设备和网络。

   Scaffold(
    body: Center(
  child: Container(
    width: kIsWeb ? 400.0 : MediaQuery.of(context).size.width,
    child: Column(
      children: [
        this.getCustomAppbarWidget(),
        this.getBodyWidget(),
      ],
    ),
  ),
))

请推荐我。

Answer 1

据我所知，AppBar 中不允许使用宽度。 AppBar 只允许高度

toolbarHeight: 60,

但是如果您想在 AppBar 中手动应用宽度，您可以将 AppBar 包装在 Padding 组件中

return Scaffold(
      body: Column(
        children: [
          Container(
            width: kIsWeb? 400 : double.maxFinite,
            child: AppBar(
              title: Text('hello'),
            ),
          ),
          Expanded(child: HomePageOne()), // this expanded is you page body
        ],
      ),
    );

Answer 2

The size this widget would prefer if it were otherwise unconstrained. In many cases it's only necessary to define one preferred dimension. For example the [Scaffold] only depends on its app bar's preferred height. In that case implementations of this method can just return new Size.fromHeight(myAppBarHeight).

但是我们可以像

一样提供customAppBar

class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
  const MyAppBar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.centerLeft,
      child: Container(
        alignment: Alignment.center,
        color: Colors.pink,
        // we can set width here with conditions
        width: 200,
        height: kToolbarHeight,
        child: Text("MY AppBar"),
      ),
    );
  }

  ///width doesnt matter
  @override
  Size get preferredSize => Size(200, kToolbarHeight);
}

并使用

Scaffold(
      extendBodyBehindAppBar: true,
      appBar: MyAppBar(),
      body: ......

如果它覆盖了 body 的第一项，在这种情况下，如果需要，请使用 SizedBox(height: kToolbarHeight) 来处理这种情况。结果

如何在 Flutter 中更改 AppBar() 的宽度？

How to change width of AppBar() in Flutter?

flutter

flutter-layout

flutter-web