Flutter 中 BottomNavigationBar 的使用详解 | Flutter Widgets

2023-09-02 16:26:39

正文

Flutter 中 BottomNavigationBar 的使用详解 | Flutter Widgets

在 Flutter 中，BottomNavigationBar 是一个可放置在屏幕底部的导航栏，它可以容纳多个按钮，每个按钮对应一个选项卡。当用户点击一个按钮时，相应的选项卡的内容就会被加载。BottomNavigationBar 非常适合用于在应用程序中导航，因为它可以帮助用户快速切换到不同的选项卡。

如何在 Flutter 中使用 BottomNavigationBar

要在 Flutter 中使用 BottomNavigationBar，需要先创建一个 BottomNavigationBar 对象。BottomNavigationBar 对象可以使用 BottomNavigationBar.new() 构造函数来创建。BottomNavigationBar 对象创建好后，需要将它添加到应用程序的 Scaffold 中。Scaffold 是 Flutter 中的一个布局组件，它可以容纳应用程序的主体内容以及导航栏。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              label: 'Settings',
            ),
          ],
        ),
      ),
    );
  }
}

上面的代码创建一个 BottomNavigationBar 对象，并将其添加到 Scaffold 中。BottomNavigationBar 对象包含两个选项卡，分别为 Home 和 Settings。当用户点击 Home 选项卡时，Home 的内容就会被加载。当用户点击 Settings 选项卡时，Settings 的内容就会被加载。

如何自定义 BottomNavigationBar

BottomNavigationBar 可以进行自定义，以满足应用程序的需求。BottomNavigationBar 可以自定义的颜色、字体、图标等。

要自定义 BottomNavigationBar 的颜色，可以使用 BottomNavigationBar.backgroundColor 属性。BottomNavigationBar.backgroundColor 属性可以设置 BottomNavigationBar 的背景色。

bottomNavigationBar: BottomNavigationBar(
  backgroundColor: Colors.blue,
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.settings),
      label: 'Settings',
    ),
  ],
),

上面的代码将 BottomNavigationBar 的背景色设置为蓝色。

要自定义 BottomNavigationBar 的字体，可以使用 BottomNavigationBar.textTheme 属性。BottomNavigationBar.textTheme 属性可以设置 BottomNavigationBar 中文字的字体。

bottomNavigationBar: BottomNavigationBar(
  textTheme: TextTheme(
    headline6: TextStyle(
      fontSize: 16,
      fontWeight: FontWeight.bold,
    ),
  ),
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.settings),
      label: 'Settings',
    ),
  ],
),

上面的代码将 BottomNavigationBar 中文字的字体设置为粗体，并设置字号为 16。

要自定义 BottomNavigationBar 的图标，可以使用 BottomNavigationBar.iconTheme 属性。BottomNavigationBar.iconTheme 属性可以设置 BottomNavigationBar 中图标的颜色和大小。

bottomNavigationBar: BottomNavigationBar(
  iconTheme: IconThemeData(
    color: Colors.white,
    size: 24,
  ),
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.settings),
      label: 'Settings',
    ),
  ],
),