flutter 顶部栏目信息AppBar参数

忘是亡心i 2021-07-24 19:53 440阅读 0赞

Scaffold(
          appBar: AppBar(
            centerTitle: true,   标题栏文字居中 
            title: Text('me-son'),  标题栏文字
            backgroundColor: Colors.red,  顶部栏目背景色
            
            leading: IconButton(  设置顶部栏目左侧图标,默认为箭头,实现事件需要IconButton
    	          icon: Icon(Icons.menu),
    	          onPressed: (){
    	          },
    	        ),  
    	        
            actions: <Widget>[   给顶部栏目最右侧添加内容
              IconButton(
                icon:Icon(Icons.search),
                onPressed: (){},
              )
            ],
            
            iconTheme: IconThemeData(color: Colors.blue,size:24.0,opacity: 0.5),  设置栏目字体图标样式
            textTheme:TextTheme(title: TextStyle(color: Colors.blue) ),  设置栏目文字样式
          ),
    	...
      );
    
    去除顶部栏目右上角的debug贴纸
    	在main.dart里的materialApp中与home同级设置
    		debugShowCheckedModeBanner: false

代码示例:

import 'package:flutter/material.dart';
    
    import '../main.dart';
    
    class Me2 extends StatefulWidget { 
      String title='me';
    
    
      @override
      _Home2State createState() => _Home2State();
    }
    
    class _Home2State extends State<Me2> { 
    
      @override
      Widget build(BuildContext context) { 
        return Scaffold(
        
          appBar: AppBar(
          
            centerTitle: true, //标题栏文字居中 
            title: Text('me-son'),
            backgroundColor: Colors.red, //顶部导航栏背景色
            leading: IconButton(
              icon: Icon(Icons.menu),
              onPressed: (){ 
                
              },
            ),  //设置顶部左侧图标,默认为箭头,实现事件需要IconButton
            actions: <Widget>[  //给右侧添加内容
              IconButton(
                icon:Icon(Icons.search),
                onPressed: (){ },
              )
            ],
            iconTheme: IconThemeData(color: Colors.blue,size:24.0,opacity: 0.5), //设置字体图标样式
            textTheme:TextTheme(title: TextStyle(color: Colors.blue) ), //设置标题栏文字样式
          ),
          
          body: Home(),
        );
      }
    }
    
    class Home extends StatelessWidget { 
    
      @override
      Widget build(BuildContext context) { 
        return Container(
          child: Column(
            children: <Widget>[
              Text('me-sonnnnn'),
              RaisedButton(
                color: Theme.of(context).accentColor,
                child: Text('回到根'),
                onPressed: (){ 
                  Navigator.of(context).pushAndRemoveUntil( new MaterialPageRoute(builder: (context) => new Tabs(index: 2)), 
                  (route) => route == null );
                },
              ),
            ],
          )
        );
      }
    }
    
    /* 单独的页面没有主题样式,需要通过Scaffold自行设置 */