flutter SliverAppbar 控件介绍

一、使用方法

与CustomScrollView、NestedScrollView集成的材质设计应用栏。应用栏由工具栏和其他小部件组成，例如 TabBar和FlexibleSpaceBar。应用栏通常会使用IconButton公开一个或多个常见操作，后者可选地后跟 PopupMenuButton以进行不太常见的操作

构造函数

const SliverAppBar({    Key key,    this.leading,         //在标题左侧显示的一个控件，在首页通常显示应用的 logo；在其他界面通常显示为返回按钮    this.automaticallyImplyLeading = true,//? 控制是否应该尝试暗示前导小部件为null    this.title,               //当前界面的标题文字    this.actions,          //一个 Widget 列表，代表 Toolbar 中所显示的菜单，对于常用的菜单，通常使用 IconButton 来表示；对于不常用的菜单通常使用 PopupMenuButton 来显示为三个点，点击后弹出二级菜单    this.flexibleSpace,        //一个显示在 AppBar 下方的控件，高度和 AppBar 高度一样， // 可以实现一些特殊的效果，该属性通常在 SliverAppBar 中使用    this.bottom,         //一个 AppBarBottomWidget 对象，通常是 TabBar。用来在 Toolbar 标题下面显示一个 Tab 导航栏    this.elevation,            //阴影    this.forceElevated = false,     this.backgroundColor,       //APP bar 的颜色，默认值为 ThemeData.primaryColor。改值通常和下面的三个属性一起使用    this.brightness,   //App bar 的亮度，有白色和黑色两种主题，默认值为 ThemeData.primaryColorBrightness    this.iconTheme,  //App bar 上图标的颜色、透明度、和尺寸信息。默认值为 ThemeData().primaryIconTheme    this.textTheme,    //App bar 上的文字主题。默认值为 ThemeData（）.primaryTextTheme    this.primary = true,  //此应用栏是否显示在屏幕顶部    this.centerTitle,     //标题是否居中显示，默认值根据不同的操作系统，显示方式不一样,true居中 false居左    this.titleSpacing = NavigationToolbar.kMiddleSpacing,//横轴上标题内容 周围的间距    this.expandedHeight,     //展开高度    this.floating = false,       //是否随着滑动隐藏标题    this.pinned = false,  //是否固定在顶部    this.snap = false,   //与floating结合使用  })复制代码

二、常用属性

在标题前面显示的一个控件，在首页通常显示应用的logo；在其他界面通常显示为返回按钮

leading: Icon(_selectedChoice.icon) ,复制代码

控制是否应该尝试暗示前导小部件为null

automaticallyImplyLeading:true ,复制代码

当前界面的标题文字

title: Text(_selectedChoice.title )复制代码

一个 Widget 列表，代表 Toolbar 中所显示的菜单，对于常用的菜单，通常使用 IconButton 来表示；对于不常用的菜单通常使用 PopupMenuButton 来显示为三个点，点击后弹出二级菜单

actions: 
    
     [            new IconButton( // action button              icon: new Icon(choices[0].icon),              onPressed: () { _select(choices[0]); },            ),            new IconButton( // action button              icon: new Icon(choices[1].icon),              onPressed: () { _select(choices[1]); },            ),            new PopupMenuButton
     
      ( // overflow menu              onSelected: _select,              itemBuilder: (BuildContext context) {                return choices.skip(2).map((Choice choice) {                  return new PopupMenuItem
      
       (                    value: choice,                    child: new Text(choice.title),                  );                }).toList();              },            )          ],复制代码

一个显示在 AppBar 下方的控件，高度和 AppBar 高度一样，可以实现一些特殊的效果，该属性通常在 SliverAppBar 中使用

//        flexibleSpace: Container(//          color: Colors.blue,//          width: MediaQuery.of(context).size.width,//          child: Text("aaaaaaaaaa"),//          height: 10,//        )复制代码

一个 AppBarBottomWidget 对象，通常是 TabBar。用来在 Toolbar 标题下面显示一个 Tab 导航栏

bottom: new TabBar(            isScrollable: true,            tabs: choices.map((Choice choice) {              return new Tab(                text: choice.title,                icon: new Icon(choice.icon),              );            }).toList(),          ) 复制代码

材料设计中控件的 z 坐标顺序，默认值为 4，对于可滚动的 SliverAppBar，当 SliverAppBar 和内容同级的时候，该值为 0，当内容滚动 SliverAppBar 变为 Toolbar 的时候，修改 elevation 的值

elevation: 1复制代码

APP bar 的颜色，默认值为 ThemeData.primaryColor。改值通常和下面的三个属性一起使用

backgroundColor: Colors.red,复制代码

App bar 的亮度，有白色和黑色两种主题，默认值为 ThemeData.primaryColorBrightness

brightness:Brightness.light ,复制代码

App bar 上图标的颜色、透明度、和尺寸信息。默认值为 ThemeData().primaryIconTheme

iconTheme: ThemeData().iconTheme,复制代码

App bar 上的文字主题。默认值为 ThemeData（）.primaryTextTheme

textTheme: ThemeData().accentTextTheme,复制代码

此应用栏是否显示在屏幕顶部

primary: true,复制代码

标题是否居中显示，默认值根据不同的操作系统，显示方式不一样,true居中 false居左

centerTitle: true,复制代码

横轴上标题内容周围的间距

titleSpacing: NavigationToolbar.kMiddleSpacing,复制代码

顶部的工具栏部分的透明度 <=1.0

toolbarOpacity:1.0,复制代码

bottom的工具栏部分的透明度 <=1.0

bottomOpacity: 0.5,复制代码

appbar是否随着滑动隐藏标题

floating: true,复制代码

tab 是否固定在顶部

pinned: true,复制代码

与floating结合使用,如果snap和floating为true，则浮动应用栏将“捕捉”到视图中

snap: true,复制代码

三、一个完整的例子

1、与NestedScrollView 集成SliverAppBar

@override  Widget build(BuildContext context) {    return DefaultTabController(        length: choices.length,        child: Scaffold(            body: NestedScrollView(              headerSliverBuilder: _headerSliverBuilder,              body : TabBarView(                children: choices.map((Choice choice) {                  return new Padding(                    padding: const EdgeInsets.all(16.0),                    child: new ChoiceCard(choice: choice),                  );                }).toList(),              ),            )        )    );  }复制代码

2、与CustomScrollView 集成SliverAppBar

//例子2  @override  Widget build(BuildContext context) {    return  Scaffold(      body:CustomScrollView(        slivers: 
    
     [          const SliverAppBar(            pinned: true,            expandedHeight: 250.0,            flexibleSpace: FlexibleSpaceBar(              title: Text('Demo'),            ),          ),          SliverGrid(            gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(              maxCrossAxisExtent: 200.0,              mainAxisSpacing: 10.0,              crossAxisSpacing: 10.0,              childAspectRatio: 4.0,            ),            delegate: SliverChildBuilderDelegate(                  (BuildContext context, int index) {                return Container(                  alignment: Alignment.center,                  color: Colors.teal[100 * (index % 9)],                  child: Text('grid item $index'),                );              },              childCount: 20,            ),          ),          SliverFixedExtentList(            itemExtent: 50.0,            delegate: SliverChildBuilderDelegate(                  (BuildContext context, int index) {                return Container(                  alignment: Alignment.center,                  color: Colors.lightBlue[100 * (index % 9)],                  child: Text('list item $index'),                );              },            ),          ),        ],      ),    );  }复制代码

一个完整的例子

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget{  @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'Text Demo',      theme: ThemeData(          primarySwatch: Colors.green      ),      home: MyHomePage(title: 'Text Demo'),    );  }}class MyHomePage extends StatefulWidget {  MyHomePage({Key key, this.title}) : super(key: key);  final String title;  @override  _MyHomePageState createState() => _MyHomePageState();}class _MyHomePageState extends State
    
     {  Choice _selectedChoice = choices[0]; // The app's "state".  void _select(Choice choice) {    setState(() { // Causes the app to rebuild with the new _selectedChoice.      _selectedChoice = choice;    });  }  @override  Widget build(BuildContext context) {    return DefaultTabController(        length: choices.length,        child: Scaffold(            body: NestedScrollView(              headerSliverBuilder: _headerSliverBuilder,              body : TabBarView(                children: choices.map((Choice choice) {                  return new Padding(                    padding: const EdgeInsets.all(16.0),                    child: new ChoiceCard(choice: choice),                  );                }).toList(),              ),            )        )    );  }  List
     
       _headerSliverBuilder(BuildContext context, bool innerBoxIsScrolled){    return 
      
       [    SliverAppBar(      //1.在标题左侧显示的一个控件，在首页通常显示应用的 logo；在其他界面通常显示为返回按钮      leading: Icon(_selectedChoice.icon) ,      //2. ? 控制是否应该尝试暗示前导小部件为null      automaticallyImplyLeading:true ,      //3.当前界面的标题文字      title: Text(_selectedChoice.title ),      //4.一个 Widget 列表，代表 Toolbar 中所显示的菜单，对于常用的菜单，通常使用 IconButton 来表示；      //对于不常用的菜单通常使用 PopupMenuButton 来显示为三个点，点击后弹出二级菜单      actions: 
       
        [        new IconButton( // action button          icon: new Icon(choices[0].icon),          onPressed: () { _select(choices[0]); },        ),        new IconButton( // action button          icon: new Icon(choices[1].icon),          onPressed: () { _select(choices[1]); },        ),        new PopupMenuButton
        
         ( // overflow menu          onSelected: _select,          itemBuilder: (BuildContext context) {            return choices.skip(2).map((Choice choice) {              return new PopupMenuItem
         
          ( value: choice, child: new Text(choice.title), ); }).toList(); }, ) ], //5.一个显示在 AppBar 下方的控件，高度和 AppBar 高度一样， // 可以实现一些特殊的效果，该属性通常在 SliverAppBar 中使用 flexibleSpace: FlexibleSpaceBar( centerTitle: true, background: Image( image: NetworkImage("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551944816841&di=329f747e3f4c2554f24c609fd6f77c49&imgtype=0&src=http%3A%2F%2Fimg.tupianzj.com%2Fuploads%2Fallimg%2F160610%2F9-160610114520.jpg"), fit: BoxFit.cover, ), ), //6.一个 AppBarBottomWidget 对象，通常是 TabBar。用来在 Toolbar 标题下面显示一个 Tab 导航栏 bottom: new TabBar( isScrollable: true, tabs: choices.map((Choice choice) { return new Tab( text: choice.title, icon: new Icon(choice.icon), ); }).toList(), ) , //7.? 材料设计中控件的 z 坐标顺序，默认值为 4，对于可滚动的 SliverAppBar， // 当 SliverAppBar 和内容同级的时候，该值为 0， 当内容滚动 SliverAppBar 变为 Toolbar 的时候，修改 elevation 的值 elevation: 1, //APP bar 的颜色，默认值为 ThemeData.primaryColor。改值通常和下面的三个属性一起使用 backgroundColor: Colors.red, //App bar 的亮度，有白色和黑色两种主题，默认值为 ThemeData.primaryColorBrightness brightness:Brightness.light , //App bar 上图标的颜色、透明度、和尺寸信息。默认值为 ThemeData().primaryIconTheme iconTheme: ThemeData().primaryIconTheme, //App bar 上的文字主题。默认值为 ThemeData（）.primaryTextTheme textTheme: ThemeData().accentTextTheme, //此应用栏是否显示在屏幕顶部 primary: true, //标题是否居中显示，默认值根据不同的操作系统，显示方式不一样,true居中 false居左 centerTitle: true, //横轴上标题内容 周围的间距 titleSpacing: NavigationToolbar.kMiddleSpacing, //展开高度 expandedHeight: 200, //是否随着滑动隐藏标题 floating: true, //tab 是否固定在顶部 pinned: true, //与floating结合使用 snap: true, ) ]; }// //例子2// @override// Widget build(BuildContext context) {// return Scaffold(// body:CustomScrollView(// slivers: 
          
           [// const SliverAppBar(// pinned: true,// expandedHeight: 250.0,// flexibleSpace: FlexibleSpaceBar(// title: Text('Demo'),// ),// ),// SliverGrid(// gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(// maxCrossAxisExtent: 200.0,// mainAxisSpacing: 10.0,// crossAxisSpacing: 10.0,// childAspectRatio: 4.0,// ),// delegate: SliverChildBuilderDelegate(// (BuildContext context, int index) {// return Container(// alignment: Alignment.center,// color: Colors.teal[100 * (index % 9)],// child: Text('grid item $index'),// );// },// childCount: 20,// ),// ),// SliverFixedExtentList(// itemExtent: 50.0,// delegate: SliverChildBuilderDelegate(// (BuildContext context, int index) {// return Container(// alignment: Alignment.center,// color: Colors.lightBlue[100 * (index % 9)],// child: Text('list item $index'),// );// },// ),// ),// ],// ),// );// }}class Choice { const Choice({ this.title, this.icon }); final String title; final IconData icon;}const List
           
             choices = const 
            
             [ const Choice(title: 'Car', icon: Icons.directions_car), const Choice(title: 'Bicycle', icon: Icons.directions_bike), const Choice(title: 'Boat', icon: Icons.directions_boat), const Choice(title: 'Bus', icon: Icons.directions_bus), const Choice(title: 'Train', icon: Icons.directions_railway), const Choice(title: 'Walk', icon: Icons.directions_walk),];class ChoiceCard extends StatelessWidget { const ChoiceCard({ Key key, this.choice }) : super(key: key); final Choice choice; @override Widget build(BuildContext context) { final TextStyle textStyle = Theme.of(context).textTheme.display1; Widget _itemBuilder(BuildContext context,int index){ return ListTile( leading: Icon(choice.icon), title: Text("this is a " + choice.title), ); } return new Card( color: Colors.white, child: Center( child: ListView.builder( itemBuilder: _itemBuilder, itemCount: 30, ), ),// body: Center(// child: ListView.builder(// itemBuilder: _itemBuilder,// itemCount: 100,//// ),// )),// child: new Center(// child: new Column(// mainAxisSize: MainAxisSize.min,// crossAxisAlignment: CrossAxisAlignment.center,// children: 
             
              [// new Icon(choice.icon, size: 128.0, color: textStyle.color),// new Text(choice.title, style: textStyle),// ],// ),// ), ); }}复制代码

flutter SliverAppbar 控件介绍

一、使用方法

构造函数

二、常用属性

三、一个完整的例子