在 Flutter 中使用 NavigationRail 和 BottomNavigationBar

作者：堅果

公眾號：“大前端之旅”

華為云享專家，InfoQ簽約作者，阿里云專家博主，51CTO博客首席體驗官，開源項目GVA成員之一，專注于大前端技術的分享，包括Flutter,鴻蒙，小程序,安卓，VUE，JavaScript等。

本文將向您展示如何使用NavigationRail和BottomNavigationBar在 Flutter 中創建****自適應布局。我們將瀏覽一下這個概念，然后通過一個完整的例子來在實踐中應用這個概念。

NavigationRail小部件用于創建位于應用左側或右側的“垂直標簽欄”。它非常適合平板電腦、筆記本電腦、電視等寬屏設備。它通常包含多個視圖，讓用戶可以輕松地在不同視圖之間切換。

BottomNavigationBar小部件用于創建非常適合智能手機的底部標簽欄。它由多個選項卡組成，讓用戶可以輕松地在視圖之間導航。

我們可以使用NavigationRail和BottomNavigationBar來構建現代自適應布局。當屏幕很大時，我們顯示NavigationRail，當屏幕較小時，我們顯示BottomNavigationBar。一次只出現其中一個。要檢測屏幕寬度，我們可以使用：

MediaQuery.of(context).size.width

這個例子

應用預覽

我們要構建的應用程序有一個導航欄、一個底部標簽欄和 4 個不同的視圖：主頁、Feed、收藏夾和設置。每個視圖都與底部標簽欄的一個標簽和導航欄的一個項目相連。

• 如果屏幕寬度小于 640 像素，則將呈現底部標簽欄，而不會顯示左側導航欄。
• 如果屏幕寬度等于或大于 640 像素，則不會呈現底部標簽欄，而會顯示左側導航欄。

以下是它的工作原理：

截圖

代碼

這是生成上述應用程序的完整代碼（帶有解釋）：

// main.dart import 'package:flutter/material.dart';void main() {runApp(const MyApp()); }class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return MaterialApp(// Remove the debug bannerdebugShowCheckedModeBanner: false,title: '大前端之旅',theme: ThemeData(primarySwatch: Colors.indigo),home: const HomeScreen());} }class HomeScreen extends StatefulWidget {const HomeScreen({Key? key}) : super(key: key);@override_HomeScreenState createState() => _HomeScreenState(); }class _HomeScreenState extends State<HomeScreen> {// The contents of views// Only the content associated with the selected tab is displayed on the screenfinal List<Widget> _mainContents = [// Content for Home tabContainer(color: Colors.yellow.shade100,alignment: Alignment.center,child: const Text('Home',style: TextStyle(fontSize: 40),),),// Content for Feed tabContainer(color: Colors.purple.shade100,alignment: Alignment.center,child: const Text('Feed',style: TextStyle(fontSize: 40),),),// Content for Favorites tabContainer(color: Colors.red.shade100,alignment: Alignment.center,child: const Text('Favorites',style: TextStyle(fontSize: 40),),),// Content for Settings tabContainer(color: Colors.pink.shade300,alignment: Alignment.center,child: const Text('Settings',style: TextStyle(fontSize: 40),),)];// The index of the selected tab// In the beginning, the Home tab is selectedint _selectedIndex = 0;@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('大前端之旅'),),// Show the bottom tab bar if screen width < 640bottomNavigationBar: MediaQuery.of(context).size.width < 640? BottomNavigationBar(currentIndex: _selectedIndex,unselectedItemColor: Colors.grey,selectedItemColor: Colors.indigoAccent,// called when one tab is selectedonTap: (int index) {setState(() {_selectedIndex = index;});},// bottom tab itemsitems: const [BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),BottomNavigationBarItem(icon: Icon(Icons.feed), label: 'Feed'),BottomNavigationBarItem(icon: Icon(Icons.favorite), label: 'Favorites'),BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings')]): null,body: Row(mainAxisSize: MainAxisSize.max,children: [// Show the navigaiton rail if screen width >= 640if (MediaQuery.of(context).size.width >= 640)NavigationRail(minWidth: 55.0,selectedIndex: _selectedIndex,// Called when one tab is selectedonDestinationSelected: (int index) {setState(() {_selectedIndex = index;});},labelType: NavigationRailLabelType.all,selectedLabelTextStyle: const TextStyle(color: Colors.amber,),leading: Column(children: const [SizedBox(height: 8,),CircleAvatar(radius: 20,child: Icon(Icons.person),),],),unselectedLabelTextStyle: const TextStyle(),// navigation rail itemsdestinations: const [NavigationRailDestination(icon: Icon(Icons.home), label: Text('Home')),NavigationRailDestination(icon: Icon(Icons.feed), label: Text('Feed')),NavigationRailDestination(icon: Icon(Icons.favorite), label: Text('Favorites')),NavigationRailDestination(icon: Icon(Icons.settings), label: Text('Settings')),],),// Main content// This part is always shown// You will see it on both small and wide screenExpanded(child: _mainContents[_selectedIndex]),],),);} }

構造函數和引用

NavigationRail 構造函數：

NavigationRail({Key? key, Color? backgroundColor, bool extended = false, Widget? leading, Widget? trailing, required List<NavigationRailDestination> destinations, required int selectedIndex, ValueChanged<int>? onDestinationSelected, double? elevation, double? groupAlignment, NavigationRailLabelType? labelType, TextStyle? unselectedLabelTextStyle, TextStyle? selectedLabelTextStyle, IconThemeData? unselectedIconTheme, IconThemeData? selectedIconTheme, double? minWidth, double? minExtendedWidth, bool? useIndicator, Color? indicatorColor })

BottomNavigationBar 構造函數：

BottomNavigationBar({Key? key, required List<BottomNavigationBarItem> items, ValueChanged<int>? onTap, int currentIndex = 0, double? elevation, BottomNavigationBarType? type, Color? fixedColor, Color? backgroundColor, double iconSize = 24.0, Color? selectedItemColor, Color? unselectedItemColor, IconThemeData? selectedIconTheme, IconThemeData? unselectedIconTheme, double selectedFontSize = 14.0, double unselectedFontSize = 12.0, TextStyle? selectedLabelStyle, TextStyle? unselectedLabelStyle, bool? showSelectedLabels, bool? showUnselectedLabels, MouseCursor? mouseCursor, bool? enableFeedback, BottomNavigationBarLandscapeLayout? landscapeLayout })

參考：

• navigation：設計（material.io）
• NavigationRail 類(flutter.dev)
• NavigationRailDestination類 (flutter.dev)
• BottomNavigationBar 類(flutter.dev)

后記

您已經學習了一種使用 NavigationRail 和 BottomNavigationBar 創建現代自適應用戶界面的簡單但有效的技術。考慮到這些知識，您可以為從智能手機到平板電腦和筆記本電腦的各種設備構建更直觀、更有吸引力的應用程序。因此，您的應用程序將獲得越來越多的用戶，并有更大的成功機會。

總結

以上是生活随笔為你收集整理的在 Flutter 中使用 NavigationRail 和 BottomNavigationBar的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。