Flutter – NavigationRail 小部件

NavigationRail 是一个Flutter小部件，它允许在屏幕的左侧或右侧位置创建导航栏。就像贴在底部的底部导航栏一样，我们有一个位于一侧的导航栏。 NavigationRail 适用于大型视口，例如台式机或平板电脑。在本文中，我们将查看其实现的示例以及输出。

句法：

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

参数：

1. backgroundColor：保存导航栏的容器的颜色。
2. 目的地：由要采取的轨道上的项目表示的目的地。
3. 高程：导航轨的高程。
4. 扩展：设置是否要扩展轨道的布尔值。
5. groupAlignment：轨道项目的垂直对齐方式。
6. indicatorColor：指示项的颜色。
7. labelType： rails 上项目文本的样式。
8. 前导：出现在目的地之前的小部件。
9. onDestinationSelected：选择任何目的地时调用的函数。
10. minExtendedWidth：屏幕上轨道布局后要扩展的宽度。
11. minWidth：无论目的地图标如何，轨道的最小可能宽度。
12. selectedIconTheme：选中图标的样式。
13. selectedIndex：从目标数组中选择的项目的索引。
14. selectedLabelTextStyle：从目的地中选择的图标标签的文本样式。
15. trailing：显示在目的地下方的小部件。
16. unselectedIconTheme：目的地中未选择项目的样式。
17. unselectedLabelTextStyle：目的地标签的文本样式。
18. useIndicator: Boolean 当设置为 true 时，在轨道上选定的目的地图标后面创建一个框。

例子：

Dart

import 'package:flutter/material.dart';
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Navigation Rails',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(),
    );
  }
}
  
class MyHomePage extends StatefulWidget {
  @override
  State createState() => _MyHomePageState();
}
  
class _MyHomePageState extends State {
  
  // initialize a index
  int _selectedIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GeeksForGeeks"),
        centerTitle: true,
      ),
      body: Row(
        children: [
  
          // create a navigation rail
          NavigationRail(
            selectedIndex: _selectedIndex,
            onDestinationSelected: (int index) {
              setState(() {
                _selectedIndex = index;
              });
            },
            labelType: NavigationRailLabelType.selected,
            backgroundColor: Colors.green,
            destinations: const 
            [
              // navigation destinations
              NavigationRailDestination(
                icon: Icon(Icons.favorite_border),
                selectedIcon: Icon(Icons.favorite),
                label: Text('Wishlist'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.person_outline_rounded),
                selectedIcon: Icon(Icons.person),
                label: Text('Account'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.shopping_cart_outlined),
                selectedIcon: Icon(Icons.shopping_cart),
                label: Text('Cart'),
              ),
            ],
            selectedIconTheme: IconThemeData(color: Colors.white),
            unselectedIconTheme: IconThemeData(color: Colors.black),
            selectedLabelTextStyle: TextStyle(color: Colors.white),
          ),
          const VerticalDivider(thickness: 1, width: 2),
          Expanded(
            child: Center(
              child: Text('Page Number: $_selectedIndex'),
            ),
          )
        ],
      ),
    );
  }
}

输出：