📜  flutter sliverappbar 更改颜色图标 (1)

📅  最后修改于: 2023-12-03 15:15:07.748000             🧑  作者: Mango

Flutter SliverAppBar 更改颜色和图标

Flutter中的SliverAppBar是一个灵活的小部件,用于在滚动内容时自动隐藏或固定在屏幕底部,并允许自定义标题、背景和行为。在本文中,我们将讨论如何更改SliverAppBar的颜色和图标。

更改颜色

要更改SliverAppBar的颜色,可以使用bottom属性。bottom的类型是PreferredSizeWidget,它允许您自定义AppBar的高度和背景,以及其他细节。下面是一个例子:

SliverAppBar(
  leading: IconButton(
    icon: Icon(Icons.menu),
    onPressed: () {},
  ),
  backgroundColor: Colors.red,
  expandedHeight: 200.0,
  flexibleSpace: FlexibleSpaceBar(
    title: Text('My App'),
    background: Image.asset(
      'assets/images/header.jpg',
      fit: BoxFit.cover,
    ),
  ),
  bottom: PreferredSize(
    preferredSize: Size.fromHeight(20.0),
    child: Container(
      color: Colors.blue,
      child: Center(
        child: Text('Bottom'),
      ),
    ),
  ),
),

在上面的示例中,我们设置了SliverAppBar的背景颜色为红色,底部为蓝色,并使其包含一个中央的文本小部件。

更改图标

要更改SliverAppBar的图标,可以使用leading、actions和backwardsCompatibility属性。leading和actions用于定义AppBar左侧和右侧的小部件,而backwardsCompatibility用于支持旧版本的Flutter。

下面是一个例子:

SliverAppBar(
  leading: IconButton(
    icon: Icon(Icons.menu, color: Colors.white),
    onPressed: () {},
  ),
  actions: <Widget>[
    IconButton(
      icon: Icon(Icons.search, color: Colors.white),
      onPressed: () {},
    ),
    IconButton(
      icon: Icon(Icons.more_vert, color: Colors.white),
      onPressed: () {},
    ),
  ],
  backwardsCompatibility: false,
),

在上面的示例中,我们设置了SliverAppBar的leading属性为一个带有白色颜色的menu图标的IconButton,actions为两个带有白色颜色的搜索和更多选项图标的IconButton,并禁用了后向兼容性。

这是关于如何更改Flutter SliverAppBar的颜色和图标的简短介绍。如果您想了解更多关于SliverAppBar的信息,可以查看Flutter文档。