開發(fā)app時(shí)對(duì)手機(jī)頁(yè)面的使用珍语，就會(huì)要使用到tab分頁(yè)功能

主要頁(yè)面代碼如下：

class Tabs extends StatefulWidget {
  Tabs({Key? key}) : super(key: key);

  @override
  _TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  int _currentIndex = 0;
  List<Widget> _currentPage = [HomePage(), Settings(), Search()];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: this._currentPage[this._currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: "首頁(yè)",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: "設(shè)置",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: "搜索",
          ),
        ],
        onTap: (int index) {
          setState(() {
            this._currentIndex = index;
          });
        },
        fixedColor: Colors.red,
        type: BottomNavigationBarType.fixed,
      ),
    );
  }
}

上述代碼是對(duì)底部導(dǎo)航欄進(jìn)行命名

另外還需要新建幾個(gè)分頁(yè)面：

• HomePage

class HomePage extends StatefulWidget {
  HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton(
          child: Text("跳轉(zhuǎn)搜索頁(yè)面"),
          onPressed: () {
            Navigator.of(context)
                .push(MaterialPageRoute(builder: (context) => Search()));
          },
        ),
        SizedBox(
          height: 10.0,
        ),
        ElevatedButton(
          child: Text("跳轉(zhuǎn)到表單頁(yè)面并傳值"),
          onPressed: () {
            Navigator.of(context).push(
                MaterialPageRoute(builder: (context) => FormPage(title: "hahah")));
          },
        ),
      ],
    );
  }
}

• Settings

class Settings extends StatefulWidget {
  Settings({Key? key}) : super(key: key);

  @override
  _SettingsState createState() => _SettingsState();
}

class _SettingsState extends State<Settings> {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        ListTile(
          title: Text("我是一個(gè)文本"),
        ),
        ListTile(
          title: Text("我是一個(gè)文本"),
        ),
        ListTile(
          title: Text("我是一個(gè)文本"),
        ),
      ],
    );
  }
}

• Search

class Search extends StatefulWidget {
  Search({Key? key}) : super(key: key);

  @override
  _SearchState createState() => _SearchState();
}

class _SearchState extends State<Search> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("我是搜索頁(yè)面"),
      ),
      body: Text("內(nèi)容區(qū)域"),
    );
  }
}

這樣就可以實(shí)現(xiàn)tab效果,

image.png