Flutter系列:九自定义bottomNavigationBar

源码地址：GitHub - hhbbeijing/flutter_app_test   提交日期：2022-5-10

上章我们已能够自定义图片库，本示例我们将结合ttf 自定义bottomNavigationBar，作为企业级app的一部分。

一、制作TTF

1.1 将png转换为SVG：

PNG转SVG – 在线将PNG文档转换成至SVG

转换成功后能够预览图片，否则显示失败。

2.2 制作 TTF

网址：iconfont-阿里巴巴矢量图标库

登录后，上传SVG到自己的项目

下载

 二、自定义BottomNavigationBar

2.1 自定义布局

1.  
   import 'package:flutter/material.dart';
2.  
   import 'package:flutter_app_test/pages/example/ttf/MyIcons.dart';
3.  
    
4.  
   void main() {
5.  
   runApp(Main());
6.  
   }
7.  
    
8.  
   class Main extends StatelessWidget {
9.  
   @override
10.  
    Widget build(BuildContext context) {
11.  
    return MaterialApp(
12.  
    theme: ThemeData(
13.  
    primaryColor: Colors.green,
14.  
    ),
15.  
    home: MainPage());
16.  
    }
17.  
    }
18.  
     
19.  
    class MainPage extends StatefulWidget {
20.  
    @override
21.  
    _HomePageState createState() => _HomePageState();
22.  
    }
23.  
     
24.  
    class _HomePageState extends State<MainPage> {
25.  
    late int currentIndex;
26.  
     
27.  
    @override
28.  
    void initState() {
29.  
    super.initState();
30.  
    currentIndex = 0;
31.  
    }
32.  
     
33.  
    @override
34.  
    Widget build(BuildContext context) {
35.  
    return Scaffold(
36.  
    appBar: null,
37.  
    body: Container(
38.  
    padding: const EdgeInsets.all(100),
39.  
    child: Row(
40.  
    children: [
41.  
    Icon(
42.  
    MyIcons.home,
43.  
    size: 100,
44.  
    color: Colors.green,
45.  
    ),
46.  
    Text("This is a ttf!"),
47.  
    ],
48.  
    ),
49.  
    ),
50.  
    bottomNavigationBar: BottomNavigationBar(
51.  
    currentIndex: currentIndex,
52.  
    onTap: (index) {
53.  
    _changePage(index);
54.  
    },
55.  
    selectedItemColor: Colors.green,
56.  
    unselectedItemColor: Colors.black38,
57.  
    backgroundColor: Colors.white,
58.  
    iconSize: 40,
59.  
    type: BottomNavigationBarType.fixed,
60.  
    items: const [
61.  
    BottomNavigationBarItem(
62.  
    icon: Icon(MyIcons.home),
63.  
    activeIcon: Icon(MyIcons.home),
64.  
    label: "首页"),
65.  
    BottomNavigationBarItem(
66.  
    icon: Icon(MyIcons.life),
67.  
    activeIcon: Icon(MyIcons.life),
68.  
    label: "生活"),
69.  
    BottomNavigationBarItem(
70.  
    icon: Icon(MyIcons.money),
71.  
    activeIcon: Icon(MyIcons.money),
72.  
    label: "理财"),
73.  
    BottomNavigationBarItem(
74.  
    icon: Icon(MyIcons.mine),
75.  
    activeIcon: Icon(MyIcons.mine),
76.  
    label: "我的"),
77.  
    ]),
78.  
    );
79.  
    }
80.  
     
81.  
    /*切换页面*/
82.  
    void _changePage(int index) {
83.  
    /*如果点击的导航项不是当前项 切换 */
84.  
    if (index != currentIndex) {
85.  
    setState(() {
86.  
    currentIndex = index;
87.  
    });
88.  
    }
89.  
    }
90.  
    }

属性含义：

BottomNavigationBarItem-

icon：默认图标

activeIcon：选中时的图标

label：文本

backgroundColor：BottomNavigationBarType为shifting时的背景颜色

BottomNavigationBar-

items：内部元素集合

currentIndex：当前选中项

backgroundColor：背景色

selectedItemColor：图片及文本选中项的颜色

unselectedItemColor：图片及文本未选中项的颜色

iconSize：图标大小

type：底部导航栏的类型，有fixed和shifting两个类型，显示效果不一样

onTap：点击回调函数

2.2 回调函数

靠！这是个什么玩意？？？

别急，往下看：

1.  
   /// Called when one of the [items] is tapped.
2.  
   ///
3.  
   /// The stateful widget that creates the bottom navigation bar needs to keep
4.  
   /// track of the index of the selected [BottomNavigationBarItem] and call
5.  
   /// `setState` to rebuild the bottom navigation bar with the new [currentIndex].
6.  
   final ValueChanged<int>? onTap;

首先看下面的定义：定义了一个修饰符未final的int类型，名为currentIndex的属性。

1.  
   /// The index into [items] for the current active [BottomNavigationBarItem].
2.  
   final int currentIndex;

好了，我们透过源码，观察如下：

1.  
   /// Signature for callbacks that report that an underlying value has changed.
2.  
   ///
3.  
   /// See also:
4.  
   ///
5.  
   /// * [ValueSetter], for callbacks that report that a value has been set.
6.  
   typedef ValueChanged<T> = void Function(T value);

final ValueChanged<int>? onTap;

尝试解释一下 ：定义了一个修饰符为final的回调函数，当int类型值有改变时，触发回调。

2.3 回调函数示例

1.  
   import 'dart:io';
2.  
    
3.  
   void main(){
4.  
   BottomNavigationBar bar = BottomNavigationBar(
5.  
   changed: (index){
6.  
   print("index-->" index);
7.  
   }
8.  
   );
9.  
   print("sleep 3 s");
10.  
    sleep(const Duration(seconds: 3));
11.  
    bar.select("40");
12.  
    }
13.  
     
14.  
    //别名函数
15.  
    typedef ValueChanged<T> = void Function(T value);
16.  
     
17.  
    class BottomNavigationBar{
18.  
     
19.  
    final ValueChanged<String>? changed;
20.  
     
21.  
    BottomNavigationBar({
22.  
    // ValueChanged<String>? this.changed,
23.  
    this.changed,
24.  
    });
25.  
     
26.  
    //改变状态
27.  
    void select(String index){
28.  
    print(this.changed == null);
29.  
    //this.changed 不为空 执行 call；
30.  
    // call就是将index字段值，赋予ValueChanged，可以理解为值发生了变化，便回调
31.  
    this.changed?.call(index);
32.  
    }
33.  
     
34.  
    }
35.  
     

这篇好文章是转载于：学新通技术网