Flutter的底部导航栏小部件

📌 相关文章

📜 Flutter的底部导航栏小部件

📅 最后修改于: 2021-09-02 05:09:35 🧑 作者: Mango

BottonNavigationBar小部件用于显示应用程序的底部。它可以由多个项目组成，例如图标、文本或两者，根据应用程序的设计导致不同的路由。它旨在帮助用户导航到应用程序的不同部分。

构造函数：

Syntax:
BottomNavigationBar(
{Key key, 
@required List items, 
ValueChanged 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: true, 
bool showUnselectedLabels, 
MouseCursor mouseCursor})

特性：

hashCode：此对象的哈希码。
key：控制一个小部件如何替换树中的另一个小部件。
runtimeType：对象的运行时类型的表示。
backgrounColor： BottomNavigationBar 本身的颜色。
海拔：此BottomNavigationBar 的z 坐标。
fixedColor：此BottomNavigationBar 的z 坐标。
items：定义排列在底部导航栏中的按钮项的外观。
onTap：当其中一项被点击时调用。
currentIndex：此属性将一个int值作为对象分配索引 t 项。
fixedColor：该属性以Color类为对象，为SelectedItemColor分配一个固定值。
iconSize：它以double值作为对象来确定BottomNavigationBar中所有图标的大小。
mouseCursor： mouseCursor属性将MouseCursor类作为对象。它确定此小部件将具有的光标类型。
selectedFontSize：此属性控制选择项目时BottomNavigationBar 中的字体大小。它采用双精度值作为对象。
selectedIcontheme：该属性持有IconThemeData类作为对象，以控制此小部件被选中时的图标外观。
selectedIconColor：此属性决定了此小部件内的图标在被选中时将保持的颜色。该属性以Color类为属性。
selectedLabelStyle： TextStyle类是分配给此属性的对象，它控制选择实例中的文本样式。
showSelectedLabele：该属性以一个布尔值作为对象来判断未选中项的标签是否将被显示。
showUnselectedLabels：此属性还接受一个布尔值作为对象，以确定是否显示所选项目的标签。
type： type属性控制着BottomNavigationBar 的行为和布局。它需要 BottomNavigationBarType 枚举作为对象。
unselectedFontSize：这个属性也将一个double值作为e对象来确定当项目未被选中时的字体大小。
unselectedIconTheme：该属性还持有IconThemeData类作为对象，用于控制此小部件在未选择或未选择时的图标外观。
unselectedItemColor ：这个属性决定了这个小部件内的图标在被取消选中时将保持的颜色。该属性以Color类为属性。
unselectedLabelStyle： TextStyle类是分配给此属性的对象，它控制取消选择项时的文本样式。

例子：

Dart

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}
 
class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);
 
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
 
class _MyStatefulWidgetState extends State {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
  TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List _widgetOptions = [
    Text(
      'HOME PAGE',
      style: optionStyle,
    ),
    Text(
      'COURSE PAGE',
      style: optionStyle,
    ),
    Text(
      'CONTACT GFG',
      style: optionStyle,
    ),
  ];
 
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GeeksForGeeks'),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.bookmark),
            title: Text('Courses'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.contact_mail),
            title: Text('Mail'),
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

输出：

解释：

首先，创建无状态主小部件。
其次使用小部件构建器在脚手架内创建一个应用栏。
第三次使用主应用程序正文中的ButtomNavigationBar小部件
不要忘记使用 style 属性在应用程序底部设置导航栏。

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?