时间戳

首页 > 解决方案 > 如何在 Flutter 中更改 AppBar() 的宽度？

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

问题描述

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

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

上面的代码完美适用于除了 web 中的 appbar 之外的所有移动设备和 web 屏幕。

如何更改 appbar 的宽度以适应宽度 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(),
      ],
    ),
  ),
))

请给我建议。

标签： flutterflutter-layoutflutter-web

解决方案

据我所知，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
        ],
      ),
    );

推荐阅读