Flutter开发:Drawer+BottomNavigationBar实现一个简单的首页


class TwoPage extends StatefulWidget {
  @override
  State createState() {
    // TODO: implement createState
    return StateO();
  }
}

class StateO extends State {
  String text = "";
  List list = ["首页", "项目", "导航", "我的"];
  List homeList = [MainPage1(), MainPage2(), MainPage3(), MainPage4()];

  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('hehhe'),
      ),
      drawer: Drawer(
          child: ListView(
        //设置Drawer也实现沉浸式
        padding: EdgeInsets.zero,
        children: [
          UserAccountsDrawerHeader(
            accountName: Text(
              '你的城市',
              style: TextStyle(fontSize: 20),
            ),
            accountEmail: Text('15977395823'),
            currentAccountPicture: CircleAvatar(
              backgroundImage:
                  NetworkImage('https://www.itying.com/images/flutter/2.png'),
            ),
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: NetworkImage(
                        'https://www.itying.com/images/flutter/2.png'),
                    fit: BoxFit.cover)),
          ),
          ListTile(
            title: Text(
              '首页',
              style: TextStyle(fontSize: 16),
            ),
            leading: Icon(Icons.home),
          ),
          ListTile(
            title: Text(
              '广场',
              style: TextStyle(fontSize: 16),
            ),
            leading: Icon(Icons.account_balance),
          ),
          ListTile(
            title: Text(
              '我的收藏',
              style: TextStyle(fontSize: 16),
            ),
            leading: Icon(Icons.collections),
          ),
          ListTile(
            title: Text(
              '问答',
              style: TextStyle(fontSize: 16),
            ),
            leading: Icon(Icons.question_answer),
          ),
          ListTile(
            title: Text(
              '我的积分',
              style: TextStyle(fontSize: 16),
            ),
            leading: Icon(Icons.card_giftcard),
          ),
          ListTile(
            title: Text(
              '设置',
              style: TextStyle(fontSize: 16),
            ),
            leading: Icon(Icons.settings),
          ),
        ],
      )),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.blue,
        onTap: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
        //2
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('首页'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.personal_video),
            title: Text('项目'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.send),
            title: Text('导航'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person_outline),
            title: Text('我的'),
          ),
        ],
      ),
      body: homeList[_selectedIndex],
    );
  }

}

class MainPage1 extends StatefulWidget {
  @override
  _MainPageState1 createState() => _MainPageState1();
}

class _MainPageState1 extends State
    with AutomaticKeepAliveClientMixin {
  @protected
  bool get wantKeepAlive => true;
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Center(child: Text("首页"));
  }
}

class MainPage2 extends StatefulWidget {
  @override
  _MainPageState2 createState() => _MainPageState2();
}

class _MainPageState2 extends State
    with AutomaticKeepAliveClientMixin {
  @protected
  bool get wantKeepAlive => true;
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Center(child: Text("项目"));
  }
}

class MainPage3 extends StatefulWidget {
  @override
  _MainPageState3 createState() => _MainPageState3();
}

class _MainPageState3 extends State
    with AutomaticKeepAliveClientMixin {
  @protected
  bool get wantKeepAlive => true;
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Center(child: Text("导航"));
  }
}

class MainPage4 extends StatefulWidget {
  @override
  _MainPageState4 createState() => _MainPageState4();
}

class _MainPageState4 extends State
    with AutomaticKeepAliveClientMixin {
  @protected
  bool get wantKeepAlive => true;
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Center(child: Text("我的"));
  }
}

 

你可能感兴趣的:(Flutter开发)