左右侧滑,抽屉视图

class TabsView extends StatefulWidget {
const TabsView({super.key});

@override
State<TabsView> createState() => _TabsViewState();
}

class _TabsViewState extends State<TabsView> {
int _currentIndex = 0;
final List<Widget> _pages = [
HomeView(),
CategoryView(),
SettingView(),
MessageView(),
UserView(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
//导航栏
title: Text(
"你好啊",
textAlign: .left,
style: TextStyle(fontSize: 17, color: Colors.orange),
),
backgroundColor: Colors.blue,
),
drawer: Drawer(//抽屉视图,侧滑
child: Column(
spacing: 0,
children: [
Row(
spacing: 0,

          children: [
            Expanded(
              flex: 1,
              child: DrawerHeader(
                margin: EdgeInsets.zero,
                padding: EdgeInsetsGeometry.zero,
                decoration: BoxDecoration(
                  color: Colors.red,
                  image: DecorationImage(
                    image: NetworkImage(
                      "https://b0.bdstatic.com/e7e1e801ce7030779de630de3a2e7569.jpg",
                    ),
                    fit: BoxFit.cover,
                  ),
                ),
                child: Column(
                spacing: 0,
                  crossAxisAlignment: .center,
                  children: [
                    ListTile(
                      leading: CircleAvatar(
                        child: Image.network(
                          "https://b0.bdstatic.com/e7e1e801ce7030779de630de3a2e7569.jpg",
                          fit: BoxFit.cover,
                        ),
                      ),
                      title: Text(
                        "2222",
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 23,
                          fontWeight: .bold,
                        ),
                      ),
                    ),
                    ListTile(title: Text("打啊沙嗲救死扶伤" , style: TextStyle(
                      color: Colors.white,
                      fontSize: 17,
                      fontWeight: .bold,
                    ),),),

                  ],
                ),
              ),
            ),
          ],
        ),
        SizedBox(
          height: 50,
          child: ListTile(
            leading: CircleAvatar(child: Icon(Icons.people)),
            title: Text("12312312312312"),
            subtitle: Text("答复"),
          ),
        ),
        Divider(),
        SizedBox(
          height: 50,
          child: ListTile(
            leading: CircleAvatar(child: Icon(Icons.search)),
            title: Text("12312312312312"),
            subtitle: Text("sdfsdfsd"),
          ),
        ),
        Divider(),
      ],
    ),
  ),
  endDrawer: Drawer(child: Text("右侧侧边啦")),
  body: _pages[_currentIndex],
  bottomNavigationBar: BottomNavigationBar(
    iconSize: 35, //图标大小
    currentIndex: _currentIndex,
    selectedItemColor: Colors.blue,
    type: BottomNavigationBarType.fixed, //底部大于3个item的时候需要配置
    onTap: (index) {
      setState(() {
        _currentIndex = index;
      });
      print("点击了$index");
    },
    items: [
      BottomNavigationBarItem(
        icon: Icon(Icons.eleven_mp_rounded),
        label: "首页",
      ),
      BottomNavigationBarItem(icon: Icon(Icons.eleven_mp), label: "分类"),
      BottomNavigationBarItem(
        icon: Icon(Icons.eighteen_mp_sharp),
        label: "设置",
      ),
      BottomNavigationBarItem(icon: Icon(Icons.message), label: "消息"),

      BottomNavigationBarItem(icon: Icon(Icons.verified_user), label: "用户"),
    ],
  ),
  floatingActionButton: Container(
    //那个加号
    width: 60,
    height: 60,
    margin: EdgeInsets.only(top: 20), //下移20
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(40),
    ),
    child: FloatingActionButton(
      backgroundColor: _currentIndex == 2 ? Colors.red : Colors.yellow,
      onPressed: () {
        setState(() {
          _currentIndex = 2;
        });
      },
      shape: CircleBorder(), //圆形
      child: Icon(Icons.add),
    ),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);

}
}

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容