14. Flutter ラーニング パス ドロワーのサイドバーとサイドバーのコンテンツ レイアウト

引き出し

パラメータ	説明する
child	サブアセンブリ
elevation
semanticLabel

引き出しヘッダー

パラメータ	説明する
decoration	上部の背景色を設定します
child	構成子要素
padding	パディング
margin	マージン

として使用されます

class Tabs extends StatefulWidget{
  final index;

  Tabs({this.index=0});

  @override
  State<StatefulWidget> createState() {
    return _TabsState(index);
  }

}

class _TabsState extends State<Tabs>{
  List<Widget> _page=[HomePage(),SettignPage(),MinePage()]; //用于存放对应的页面
  int _bottomIndex=0;

  _TabsState(index){
   _bottomIndex=index;
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text('Flutter BottomNavigationBar'),),
      body:this._page[_bottomIndex],
      bottomNavigationBar: BottomNavigationBar(
        iconSize: 25,

        type: BottomNavigationBarType.fixed,  //配置底部tabs可以有多个按钮
        currentIndex: this._bottomIndex,//对应点击/显示哪个底部导航栏按钮
        onTap: (index){ //bottomNavigationBar的点击事件
          setState(() {
            this._bottomIndex=index;  //将选中的下标进行替换
          });
        },
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('首页')
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text('设置')
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.mood),
              title: Text('我的')
          ),
         
        ],
      ),
      drawer: Drawer(
        child: Column(
          children: <Widget>[
              Row(
                children: <Widget>[
                  Expanded(
                    flex: 1,
                    child: DrawerHeader( //侧边栏的头部
                      child: Text('你好Flutter'),
                      decoration: BoxDecoration(
//                        color: Colors.red
                        image: DecorationImage(
                          image: NetworkImage('https://www.itying.com/images/flutter/2.png'),
                          fit: BoxFit.cover
                        )
                      ),
                    ),
                  )
                ],
              ),
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.home),
              ),
              title: Text('空间'),
            ),
            Divider(),//一条线
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.people),
              ),
              title: Text('用户中心'),
            ),
            Divider(),//一条线
          ],
        ),
      ),
      endDrawer: Drawer(
        child: Column(
          children: <Widget>[

            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.settings),
              ),
              title: Text('设置中心'),
              onTap: (){		//实现点击进行侧边栏的item进行关闭侧边栏
                Navigator.pop(context);
              },
            ),
            Divider(),//一条线
          ],
        )
      ),
    );
  }
}

ユーザーアカウント引き出しヘッダー

これは、Flutter が提供する共通のユーザーheanderコンポーネントです。

属性	説明する
decoration	上部の背景色を設定します
accountName	アカウント名
accountEmail	アカウントのメールアドレス
currentaccountPicture	プロフィールの写真
otherAccountsPicture	現在のアカウントの他のアカウントのアバターを設定するために使用されます
margin	マージン