Flutter AppBar 宽度

在 Flutter 应用程序中，AppBar 是常用的顶部栏组件，它能够展示页面标题、菜单按钮以及其他的自定义操作。在默认情况下，AppBar 的宽度会占据整个屏幕。但是，在实际开发中，我们可能会需要对它的宽度进行自定义，以满足特定的需求。

设置宽度方式

1. 在Scaffold的appBar属性中设置

在 Scaffold 的 appBar 属性中，可以通过 PreferredSize 组件来设置 AppBar 的宽度。例如：

Scaffold(
  appBar: PreferredSize(
    preferredSize: Size.fromHeight(kToolbarHeight),
    child: AppBar(
      title: Text('Custom Width AppBar'),
      centerTitle: true,
      backgroundColor: Colors.blue,
      elevation: 0.0,
    ),
  ),
  body: Center(
    child: Text('Page Content'),
  ),
);

在这个例子中，我们使用 PreferredSize 组件来设置 AppBar 的高度为标准高度 kToolbarHeight，然后在 child 中定义 AppBar 的具体内容。此时，这个 AppBar 的宽度将会是默认的屏幕宽度。

要自定义宽度，可以在 AppBar 中定义一个宽度值即可，例如：

Scaffold(
  appBar: PreferredSize(
    preferredSize: Size.fromHeight(kToolbarHeight),
    child: Container(
      width: 200.0, // 在这里自定义AppBar的宽度
      child: AppBar(
        title: Text('Custom Width AppBar'),
        centerTitle: true,
        backgroundColor: Colors.blue,
        elevation: 0.0,
      ),
    ),
  ),
  body: Center(
    child: Text('Page Content'),
  ),
);

2. 自定义 AppBar

另外一种方法是直接自定义 AppBar，并在其中定义宽度。例如：

class CustomAppBar extends StatelessWidget with PreferredSizeWidget {
  final double appBarHeight = 80.0; // 定义AppBar高度
  final double appBarWidth = 200.0; // 定义AppBar宽度

  @override
  Size get preferredSize => Size.fromHeight(appBarHeight);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: appBarHeight,
      width: appBarWidth,
      child: AppBar(
        title: Text(
          'Custom Width AppBar',
          style: TextStyle(
            fontSize: 20.0,
            fontWeight: FontWeight.bold,
          ),
        ),
        centerTitle: true,
        backgroundColor: Colors.blue,
        elevation: 0.0,
      ),
    );
  }
}

在这个例子中，我们定义了一个 CustomAppBar 类，在其中定义了 appBarHeight 和 appBarWidth 两个属性来自定义 AppBar 的尺寸。然后，在 build() 方法中，我们返回了一个自定义的 SizedBox，并在其中定义了 AppBar 的具体内容。

最后，我们可以在 Scaffold 中使用这个自定义的 AppBar，例如：

Scaffold(
  appBar: CustomAppBar(), // 使用自定义AppBar
  body: Center(
    child: Text('Page Content'),
  ),
);

这样，就可以使用自定义尺寸的 AppBar 了。

总结

通过上述这些方式，我们可以很方便地实现自定义宽度的 AppBar，以满足特定的需求。以上为Flutter AppBar 宽度的介绍。