• 【Flutter】【widget】BottomNavigationBar和BottomAppBar

    文章目录

    在这里插入图片描述

    前言

    BottomNavigationBar 底部导航栏

    一、BottomNavigationBar是什么？

    底部导航栏，如同微信，最下面的导航栏

    二、使用步骤

    1.简单使用

    代码如下（示例）：

          bottomNavigationBar: BottomNavigationBar(
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        backgroundColor: Colors.white,
        elevation: 10,
        currentIndex: _currentIndex, //选中的index配合stack 使用
        items: const [
//这边可以设置，点击之后的icon 颜色等
          BottomNavigationBarItem(
              activeIcon: Icon(Icons.phone_in_talk, color: Colors.red),
              icon: Icon(Icons.phone_in_talk, color: Colors.black),
              label: '通讯录'),
          BottomNavigationBarItem(
              activeIcon: Icon(Icons.find_in_page, color: Colors.red),
              icon: Icon(Icons.find_in_page, color: Colors.black),
              label: '发现'),
          BottomNavigationBarItem(
              activeIcon: Icon(Icons.people, color: Colors.red),
              icon: Icon(Icons.people, color: Colors.black),
              label: '我'),
        ],
      ),

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    也可以统一设置风格，颜色和选中颜色等

          bottomNavigationBar: BottomNavigationBar(
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        backgroundColor: Colors.white,
        elevation: 10,
        currentIndex: _currentIndex, //选中的index配合stack 使用
        selectedItemColor: Colors.red, //选中的文本的颜色

        //可以自己单独对应icon 进行设置，可以在这边统一的设置
        selectedIconTheme: IconThemeData(color: Colors.greenAccent),
        unselectedIconTheme: IconThemeData(color: Colors.black),

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    注意：BottomNavigationBarItem的数量要大于等于2，不然会报错

    在这里插入图片描述

    完整的代码如下：

        type: BottomNavigationBarType.fixed,//shifting:选中才显示文本,fixed文本一直显示，两种不同的模式

    • 1
    class SecondPage extends StatefulWidget {
  const SecondPage({Key? key}) : super(key: key);

  @override
  _SecondPageState createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  int _currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('second page'),
      ),
      body: IndexedStack(
        index: _currentIndex,
        children: [
          Center(
            child: Container(
              child: Text('1'),
            ),
          ),
          Center(
            child: Container(
              child: Text('2'),
            ),
          ),
          Center(
            child: Container(
              child: Text('3'),
            ),
          ),
          Center(
            child: Container(
              child: Text('4'),
            ),
          ),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,//shifting:选中才显示文本,fixed文本一直显示
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        backgroundColor: Colors.white,
        elevation: 10,
        currentIndex: _currentIndex, //选中的index配合stack 使用
        selectedItemColor: Colors.red, //选中的文本的颜色

        //可以自己单独对应icon 进行设置，可以在这边统一的设置
        selectedIconTheme: const IconThemeData(color: Colors.green),
        unselectedIconTheme: const IconThemeData(color: Colors.black),
        items: const [
          BottomNavigationBarItem(
              icon: Icon(
                Icons.task_alt_sharp,
                // color: Colors.black,
              ),
              label: '微信'),
          BottomNavigationBarItem(
              icon: Icon(Icons.phone_in_talk), label: '通讯录'),
          BottomNavigationBarItem(icon: Icon(Icons.find_in_page), label: '发现'),
          BottomNavigationBarItem(icon: Icon(Icons.people), label: '我'),
        ],
      ),
    );
  }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72

    在这里插入图片描述

    2.BottomAppBar

    可以在BottomNavigationBar的按钮顶部留出一个控件给 floatbutton![

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomAppBar(
        elevation: 20,
        notchMargin: 10, //float button的外边距
        shape: const CircularNotchedRectangle(), //形状，嵌入的感觉
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            IconButton(onPressed: () {}, icon: const Icon(Icons.abc)),
            IconButton(onPressed: () {}, icon: const Icon(Icons.place)),
            IconButton(onPressed: () {}, icon: const Icon(Icons.dangerous)),
            IconButton(onPressed: () {}, icon: const Icon(Icons.one_k)),
          ],
        ),
      ),
      appBar: AppBar(
        title: Text(widget.title),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69

    效果如图：

    在这里插入图片描述

    flotabutton 的位置，有很多的选择，你可以具体的参考：

    在这里插入图片描述

    flotabutton 的形状

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomAppBar(
        elevation: 20,
        notchMargin: 10, //float button的外边距
        // CircularNotchedRectangle() //形状，嵌入的感觉,凹槽的形状
        shape: const AutomaticNotchedShape(
            RoundedRectangleBorder(),
            BeveledRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(15)))),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            IconButton(onPressed: () {}, icon: const Icon(Icons.abc)),
            IconButton(onPressed: () {}, icon: const Icon(Icons.place)),
            IconButton(onPressed: () {}, icon: const Icon(Icons.dangerous)),
            IconButton(onPressed: () {}, icon: const Icon(Icons.one_k)),
          ],
        ),
      ),
      appBar: AppBar(
        title: Text(widget.title),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        shape: const BeveledRectangleBorder(
            borderRadius:
                BorderRadius.all(Radius.circular(15))), //float button 的形状,八边形
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76

    在这里插入图片描述

    总结

    欢迎关注，留言，咨询，交流！
    在这里插入图片描述

  • 相关阅读:
    知识变现海哥：如何把知识卖的更贵、更多、更酷
    Vue项目实战——实现GitHub搜索案例（学以致用，两小时带你巩固和强化Vue知识点）
    亚马逊收到CPSC查验通知后卖家需要怎么弄？ASTM F963标准测试 ，CPC认证
    DTK Barcode Recognition SDK Crack
    第一行代码（第三版）学习笔记
    初识C语言—常见关键字
    C++标准模板（STL）- 输入/输出操纵符-(std::get_money,std::put_money)
    Boost电压增益分析(输入电流低频脉动时)
    MySQL分库分表
    数据仓库扫盲系列（1）：数据仓库诞生原因、基本特点、和数据库的区别
  • 原文地址：https://blog.csdn.net/weixin_43444734/article/details/127724685