Fork me on GitHub

flutter学习----BottomNavigation底部导航

Flutter BottomNavigation底部导航

BottomNavigationBar是底部导航条,可以让我们定义底部Tab切换,bottomNavigationBar

Scaffold组件的参数。

常见属性

属性名 类型 说明
items List 底部导航条按钮集合
iconSize double 图标大小
currentIndex int 选中第几个
onTap function(index) 选中变化回调函数
fixedColor Color 选中的颜色
type BottomNavigationBarType BottomNavigationBarType.fixed BottomNavigationBarType.shifting

使用示例

Scaffold( 
    appBar: AppBar( 
        title: Text('Flutter Demo') 
    ),
    body: this._pagesList[this._curentIndex], 
    bottomNavigationBar: BottomNavigationBar( 
        currentIndex: _curentIndex, 
        onTap: _changePage, 
        fixedColor: Colors.black, 
        type: BottomNavigationBarType.fixed, 
        items: [ 
            BottomNavigationBarItem( 
                title:Text("首页"), 
                icon:Icon(Icons.home) 
            ),
            BottomNavigationBarItem( 
                title:Text("分类"), 
                icon:Icon(Icons.category) 
            ),
            BottomNavigationBarItem( 
                title:Text("设置"), 
                icon:Icon(Icons.settings) 
            ), 
        ], 
    ), 
)	
posted @   Banana_Fish  阅读(211)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 零经验选手,Compose 一天开发一款小游戏!
· 通过 API 将Deepseek响应流式内容输出到前端
· 因为Apifox不支持离线,我果断选择了Apipost!
点击右上角即可分享
微信分享提示