Unity_UIWidgets学习笔记09_组件BottomNavigationBar

阳光穿透心脏的1/2处 2021-12-15 09:49 249阅读 0赞

参考地址 [https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html][https_api.flutter.dev_flutter_material_BottomNavigationBar-class.html]

1、

public BottomNavigationBar(
                Key key = null,
                List<BottomNavigationBarItem> items = null,//所有子项目
                ValueChanged<int> onTap = null,//点击
                int currentIndex = 0,//当前选择索引
                BottomNavigationBarType? type = null,//不清楚有
                Color fixedColor = null,
                float iconSize = 24.0f//图标大小
            )
    public BottomNavigationBarItem(
                Widget icon = null,//图标
                Widget title = null,//变态
                Widget activeIcon = null,//激活图标
                Color backgroundColor = null//背景色
            )

2、例子

int selectedIndex = 0;
        TextStyle optionStyle = new TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
        List<Widget> widgetOptions
        {
            get
            {
                return new List<Widget>{
                new Text(
                    "Index 0: Home",
                    style: optionStyle
                ),
                new Text(
                    "Index 1: Business",
                    style: optionStyle
                ),
                new  Text(
                    "Index 2: School",
                    style: optionStyle
                ),
            };
    
            }
        }
        void onItemTapped(int index)
        {
            setState(() =>
            {
                selectedIndex = index;
            });
        }
    public override Widget build(BuildContext context)
        {
            return new Scaffold(
              appBar: new AppBar(
              title: new Text("BottomNavigationBar Sample")
              ),
              body: new Center(
              child: widgetOptions[selectedIndex]
              ),
              bottomNavigationBar: new BottomNavigationBar(
              items: new List<BottomNavigationBarItem>(){
                   new  BottomNavigationBarItem(
                    icon: new Icon(Icons.home),
                    title:new  Text("Home")
                    ),
                   new  BottomNavigationBarItem(
                    icon: new Icon(Icons.business),
                    title:new  Text("Business")
                    ),
                   new  BottomNavigationBarItem(
                    icon: new Icon(Icons.school),
                    title: new Text("School")
                    ),
              },
              currentIndex: selectedIndex,
              onTap: onItemTapped
              )
          );
    
        }

![1086068-20190701150238472-865845870.png][]

转载于:https://www.cnblogs.com/PandaHome/p/11114131.html

[https_api.flutter.dev_flutter_material_BottomNavigationBar-class.html]: https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html
[1086068-20190701150238472-865845870.png]: /images/20211214/e45ddbaf5a39448aa8dcbb354bda47a3.png