Flutter 如何设置 Appbar Title 和 Bottom 的距离

6 min read Sep 30, 2024

Flutter 如何设置 appbar title 和 bottom 的距离

在 Flutter 中，AppBar 的标题 (title) 和底部 (bottom) 之间的距离由 AppBar 的 bottom 属性控制。bottom 属性可以接收任何 Widget，包括 PreferredSizeWidget。

问题:

Flutter 中默认情况下，AppBar 的 title 和 bottom 之间的距离可能看起来不够美观，那么如何调整这个距离呢？

解决方案:

可以通过以下几种方法设置 AppBar 的 title 和 bottom 之间的距离：

使用 PreferredSize:

您可以使用 PreferredSize 来创建一个具有特定高度的 Widget，并将它作为 AppBar 的 bottom 属性。例如：
```
AppBar(
  title: Text('App Title'),
  bottom: PreferredSize(
    preferredSize: Size.fromHeight(40),
    child: Container(
      color: Colors.blue,
    ),
  ),
),
```
在这个例子中，PreferredSize 创建了一个高度为 40 像素的蓝色容器，作为 AppBar 的底部。这样，AppBar 的 title 和底部之间就有了 40 像素的距离。
使用 SizedBox:

您可以使用 SizedBox 来创建一段空白区域，并将它作为 AppBar 的 bottom 属性。例如：
```
AppBar(
  title: Text('App Title'),
  bottom: SizedBox(
    height: 20,
  ),
),
```
在这个例子中，SizedBox 创建了一个高度为 20 像素的空白区域，作为 AppBar 的底部。这样，AppBar 的 title 和底部之间就有了 20 像素的距离。
使用 Padding:

您也可以使用 Padding 来在 AppBar 的 title 和 bottom 之间添加空白区域。例如：
```
AppBar(
  title: Padding(
    padding: EdgeInsets.only(bottom: 20),
    child: Text('App Title'),
  ),
  bottom: Container(
    color: Colors.blue,
  ),
),
```
在这个例子中，Padding 在 AppBar 的 title 区域添加了一个底部间距为 20 像素的空白区域。

总结:

使用 PreferredSize、SizedBox 或 Padding 可以轻松地设置 AppBar 的 title 和 bottom 之间的距离。选择哪种方法取决于您的具体需求和偏好。

提示:

您还可以根据您的 UI 设计选择使用不同的颜色、边框或其他样式来装饰 AppBar 的底部。
尝试使用不同的方法来找到最适合您应用的距离和样式。

示例:

以下是一个使用 PreferredSize 设置 AppBar 的 title 和 bottom 之间的距离的完整示例：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('App Title'),
          bottom: PreferredSize(
            preferredSize: Size.fromHeight(40),
            child: Container(
              color: Colors.blue,
            ),
          ),
        ),
        body: Center(
          child: Text('Hello, world!'),
        ),
      ),
    );
  }
}

在这个示例中，AppBar 的 title 和底部之间有一个 40 像素的蓝色容器。

Flutter 如何设置 Appbar Title 和 Bottom 的距离

Flutter 如何设置 appbar title 和 bottom 的距离

Latest Posts

Featured Posts