flutter 侧边栏组件、分割线组件Divder

左手的ㄟ右手 2021-07-24 15:07 546阅读 0赞

1、在Scaffold组件中与body同级
    
    		定义右侧侧边栏将drawer换成endDrawer
    		
    		drawer:Drawer(  
    			child: Column(  侧边栏内容
              		children: <Widget>[
              			
           	 	(1)定义头部内容方式一
           	 		Row(children: <Widget>[  定义头部内容,因为头部组件会因为子组件的宽度设置,所以使用Row+Expanded让水平方向宽度铺满
              			Expanded(
                		child: DrawerHeader(  
                		
                    	  decoration: BoxDecoration()  头部盒子样式
                          child:  ,  头部内容组件
                          padding: ,
                          margin: ,
                   		 ), 
              			)
            		]),
            		
            	(2)定义头部内容方式二:
            		Row(children: <Widget>[
    		            Expanded(
    		              child:UserAccountsDrawerHeader(
    		                accountName:      用户名
    		                accountEmail:,     用户邮箱,默认出现在用户名的下面
    		                currentAccountPicture: ,  用户头像,默认在左边最上面
    		                otherAccountsPictures: <Widget>[],   用户头像右侧内容色湖之
    		                decoration: BoxDecoration(),   头部区域样式
    		              ))
    		          ]),
    		          
          		头部组件外其他内容组件...
              ]
            )
          )
          
    分割线组件
    	默认为灰色的一条铺满宽度的线
    	   Divder(); 
    	  	
    	  	参数:
      	    height,
    	    thickness,
    	    indent,
    	    endIndent,
    	    color,

代码示例:

import 'package:flutter/material.dart';
    
    import '../main.dart';
    
    class Me2 extends StatefulWidget { 
      String title='me';
    
    
      @override
      _Home2State createState() => _Home2State();
    }
    
    class _Home2State extends State<Me2> with SingleTickerProviderStateMixin { 
    
      //定义tab控制器
      TabController _tabController;
    
      @override
      void dispose() {  //生命周期函数,组件销毁时触发
        // TODO: implement dispose
        super.dispose();
      }
    
      //生命周期函数,加载就会触发
      @override
      void initState() { 
        // TODO: implement initState
        super.initState();
        _tabController=new TabController(length: 2, vsync: this);
        _tabController.addListener((){ 
          print(_tabController.index);
        });
      }
      @override
      Widget build(BuildContext context) { 
        return Scaffold(
          appBar: AppBar(
            centerTitle: true, //标题栏文字居中 
            title: Text('me-son'),
          
          ),
          body: Home(),
          drawer: Drawer( //左侧侧边栏
            child:Column(children: <Widget>[
              Row(children: <Widget>[
                Expanded(
                  child:UserAccountsDrawerHeader(
                    accountName:Text('jeff'),
                    accountEmail: Text("123@qq.com"),
                    currentAccountPicture: CircleAvatar(backgroundImage: NetworkImage("https://i0.hdslb.com/bfs/face/3d3d06b227c22e0e68895c83516861cee3bba5ed.jpg@52w_52h.jpg"),),
                    otherAccountsPictures: <Widget>[
                      Text('aa'),
                      Text('bb')
                    ],
                    decoration: BoxDecoration(
                      color:Colors.red
                    ),
                  ) ,)
              ],),
               
                ListTile(
                  title: Text('哈哈'),
                  leading: CircleAvatar(
                    child: Icon(Icons.home),
                  ),
                ),
                Divider(), //默认为灰色的一条分隔线
                ListTile(
                  title: Text('哈哈'),
                  leading: CircleAvatar(
                    child: Icon(Icons.home),
                  ),
                ),   
            ],),
          ),
          endDrawer: Drawer( //右侧侧边栏
            child: Column(
              children: <Widget>[
                Row(children: <Widget>[
                  Expanded(
                    child: DrawerHeader(  //设置侧边栏顶部内容,默认为child组件的宽度,可以使用Row加Expanded组件铺满宽度
                          decoration: BoxDecoration(
                            image: DecorationImage(  //设置背景图
                              image: NetworkImage('https://i0.hdslb.com/bfs/face/eca871e8c868ff04a4b9282c5747a4afb3d3b76c.jpg@52w_52h.jpg'),
                              fit: BoxFit.cover
                            )
                          ),
                          child:Text('侧边栏') ,
                          // padding: ,
                          // margin: ,
                        ), 
                  )
                ]),
    
                ListTile(
                  title: Text('哈哈'),
                  leading: CircleAvatar(
                    child: Icon(Icons.home),
                  ),
                ),
                Divider(), //默认为灰色的一条分隔线
                ListTile(
                  title: Text('哈哈'),
                  leading: CircleAvatar(
                    child: Icon(Icons.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自行设置 */