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

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("[email protected]"),
                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自行设置
 */
发布了670 篇原创文章 · 获赞 4 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/weixin_43294560/article/details/105556339