直接看代碼案例快速入手Flutter

本文介紹BottomNavigationBar, TabBar, Navigator.

BottomNavigationBar是底部導航欄讯檐，類似與iOS中的UITabViewController, Navigator可以處理頁面之間的導航齿风，TabBar一般用于次級導航欄，也可以作為底部導航欄挥转。

??下載GitHub倉庫颠印，直接體驗

BottomNavigationBar

Scaffold(
    appBar: AppBar(
    title: Text(
        "${runtimeType.toString().substring(0, runtimeType.toString().length - 9)} Example"),
    ),
    body: Center(
    child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
        Text('Hello, Flutter! $_selectedIndex'),
        ],
    ),
    ),
    bottomNavigationBar: BottomNavigationBar(
    items: const [
        BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: 'Home',
        ),
        BottomNavigationBarItem(
        icon: Icon(Icons.search),
        label: 'Search',
        ),
        BottomNavigationBarItem(
        icon: Icon(Icons.settings),
        label: 'Settings',
        ),
    ],
    currentIndex: _selectedIndex,
    onTap: _onItemTapped,
    ),
);

Navigator

// 直接跳轉(zhuǎn)進TextPage
Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => const RichTextPage()),
);

// 傳遞一個字符參數(shù)和閉包給TextPage
Navigator.push(
    context,
    MaterialPageRoute(
        builder: (context) => TextPage(
            text: 'Example Text',
            onTextChange: (String newText) {
                debugPrint('Text changed: $newText');
            },
        )),
);

TabBar

// 顯示在頂部的TabBar
Scaffold(
    appBar: AppBar(
    title: const Text('DefaultTabController Example'),
    bottom: const TabBar(
        tabs: [
        Tab(text: 'Tab 1'),
        Tab(text: 'Tab 2'),
        Tab(text: 'Tab 3'),
        ],
    ),
    ),
    body: const TabBarView(
    children: [
        Center(child: Text('Tab 1 Content')),
        Center(child: Text('Tab 2 Content')),
        Center(child: Text('Tab 3 Content')),
    ],
    ),
),
// 顯示在底部的TabBar
Scaffold(
    appBar: AppBar(
    title: const Text('DefaultTabController Example'),
    ),
    body: const TabBarView(
    children: [
        Center(child: Text('Tab 1 Content')),
        Center(child: Text('Tab 2 Content')),
        Center(child: Text('Tab 3 Content')),
    ],
    ),
    bottomNavigationBar: Container(
    color: Theme.of(context).primaryColor, // 設(shè)置與 AppBar 相同的背景色
    child: const SafeArea(
        child: SizedBox(
        height: kToolbarHeight, // 設(shè)置標準工具欄高度
        child: TabBar(
            tabs: [
            Tab(icon: Icon(Icons.home), text: 'Tab 1'),
            Tab(icon: Icon(Icons.star), text: 'Tab 2'),
            Tab(icon: Icon(Icons.settings), text: 'Tab 3'),
            ],
        ),
        ),
    ),
    ),
)