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

Question

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

        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

如果没有其他限制，这个小部件会喜欢的大小。在许多情况下，只需要定义一个首选维度。例如，[Scaffold] 仅取决于其应用栏的首选高度。在这种情况下，此方法的实现只需返回 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: ......

如果它覆盖了主体的第一项，在这种情况下， SizedBox(height: kToolbarHeight)如果需要的话可以用来处理这种情况。 结果