Flutter控件--AppBar

2024-01-20 13:03:17

AppBar介绍

AppBar 是 Flutter 中一个非常重要的控件，它位于屏幕的顶部，通常用于显示页面的标题、导航图标和操作按钮。它可以分为以下几个部分：

Leading ：位于 AppBar 左侧的图标，通常是一个返回箭头或菜单按钮。
Title ：位于 AppBar 中央的标题文字。
Actions ：位于 AppBar 右侧的一系列按钮或图标。

AppBar用法

AppBar 的基本用法如下：

AppBar(
  title: Text('标题'),
);

这个例子创建了一个 AppBar，其中包含一个标题为“标题”的 Text 组件。

AppBar属性

AppBar 有许多属性，可以用来自定义它的外观和行为。下面列出了一些常用的属性：

leading ：用于指定 AppBar 左侧的图标。它可以是一个 Icon 组件、一个 Text 组件或一个其他类型的 Widget。
title ：用于指定 AppBar 的标题。它可以是一个 Text 组件或一个其他类型的 Widget。
actions ：用于指定 AppBar 右侧的一系列按钮或图标。它可以是一个 List 或一个其他类型的 Widget。
bottom ：用于指定 AppBar 底部的 Widget。它可以是一个 TabBar 组件、一个 BottomAppBar 组件或一个其他类型的 Widget。
flexibleSpace ：用于指定 AppBar 的可折叠空间。它可以是一个 FlexibleSpaceBar 组件或一个其他类型的 Widget。
shape ：用于指定 AppBar 的形状。它可以是一个 RoundedRectangleBorder 组件、一个 StadiumBorder 组件或一个其他类型的 ShapeBorder 组件。
backgroundColor ：用于指定 AppBar 的背景颜色。它可以是一个 Color 组件或一个其他类型的 Color 值。
elevation ：用于指定 AppBar 的阴影高度。它可以是一个 double 值或一个其他类型的 double 值。
centerTitle ：用于指定 AppBar 的标题是否居中。它可以是一个 bool 值或一个其他类型的 bool 值。
toolbarOpacity ：用于指定 AppBar 的工具栏透明度。它可以是一个 double 值或一个其他类型的 double 值。
toolbarHeight ：用于指定 AppBar 的工具栏高度。它可以是一个 double 值或一个其他类型的 double 值。
leadingWidth ：用于指定 AppBar 左侧图标的宽度。它可以是一个 double 值或一个其他类型的 double 值。
titleSpacing ：用于指定 AppBar 标题与左侧图标之间的间距。它可以是一个 double 值或一个其他类型的 double 值。
iconTheme ：用于指定 AppBar 图标的主题。它可以是一个 IconThemeData 组件或一个其他类型的 IconThemeData 组件。
actionsIconTheme ：用于指定 AppBar 操作按钮的主题。它可以是一个 IconThemeData 组件或一个其他类型的 IconThemeData 组件。
textTheme ：用于指定 AppBar 文本的主题。它可以是一个 TextTheme 组件或一个其他类型的 TextTheme 组件。
shadowColor ：用于指定 AppBar 的阴影颜色。它可以是一个 Color 组件或一个其他类型的 Color 值。
brightness ：用于指定 AppBar 的亮度。它可以是一个 Brightness 值或一个其他类型的 Brightness 值。
scrollBehavior ：用于指定 AppBar 的滚动行为。它可以是一个 ScrollBehavior 组件或一个其他类型的 ScrollBehavior 组件。

AppBar示例

下面是一个 AppBar 的示例代码：

AppBar(
  leading: IconButton(
    icon: Icon(Icons.menu),
    onPressed: () {},
  ),
  title: Text('标题'),
  actions: <Widget>[
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {},
    ),
    IconButton(
      icon: Icon(Icons.more_vert),
      onPressed: () {},
    ),
  ],
);