Flutter：设置 AppBar 的高度 - Dart

App Bar 是在 Flutter 应用开发中常用的 UI 元素之一，但是默认情况下 App Bar 的高度可能并不符合我们的需求。接下来将介绍如何在 Flutter 中设置 App Bar 的高度。

步骤

1. 创建一个新的 Flutter 项目并在 lib/main.dart 文件中打开。
2. 导入 material 包：import 'package:flutter/material.dart';
3. 创建一个 StatelessWidget 并重写 build 方法。

class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text('My App Bar'),
      backgroundColor: Colors.blue,
      elevation: 0.0,
      // 在这里设置 App Bar 的高度，例如：56.0
      // 注意：必须添加下面这一行代码
      // PreferredSize.fromHeight(56.0)
      // 这是因为 PreferredSizeWidget 接口需要从高度中获得其大小，需以此来防止警告
      preferredSize: PreferredSize.fromHeight(56.0),
    );
  }

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: Scaffold(
        appBar: MyAppBar(),
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

在上面的代码中，我们创建了一个新的类 MyAppBar 并实现了 PreferredSizeWidget 接口。该接口需要我们实现 preferredSize 属性，以告诉应用 AppBar 的大小。在这里，我们使用 fromHeight 构造函数来设置 AppBar 的高度。

在 MyApp 类中，我们设置了 Scaffold，并在 appBar 参数中传递了 MyAppBar 的实例。这样就可以将自定义的 App Bar 用于我们的应用中。

结论

通过上面的步骤，我们可以很容易地自定义 App Bar 的高度。下面是完整的代码：

import 'package:flutter/material.dart';

class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text('My App Bar'),
      backgroundColor: Colors.blue,
      elevation: 0.0,
      preferredSize: PreferredSize.fromHeight(56.0),
    );
  }

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: Scaffold(
        appBar: MyAppBar(),
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

希望这篇文章能对你有所帮助，如果你有任何疑问或建议，请留下评论。