AppBer 自定义顶部按钮图标、颜色
| 属性 | 作用 | 类型 |
|---|---|---|
| leading | 标题前面显示的一个控件,首页一般放logo,其他页面一般放返回按钮 | |
| title | 标题 | |
| actions | 通常使用IconButton表示,可以放按钮组 | |
| bottom | 通常放tabBar,标题下面的一个导航栏,类似于头条的tab | |
| backgroundColor | 导航背景颜色 | |
| iconTheme | 图标样式 | |
| centerTitle | 标题是否居中 |
Scaffold(
appBar:AppBar(
backgroundColor:Colors.red,
title:Text("标题"),
leading:IconButton( // 左侧
onPressed(){},
icon:Icon(Icons.flutter)
),
actions:[ // 右侧
IconButton(
icon:const Icon(Icons.add),
onPressed:(){}
),
IconButton(
icon:const Icon(Icons.search),
onPressed:(){}
),
]
)
)TabBer 组件 顶部的导航栏
| 属性 | 作用 | 类型 |
|---|---|---|
| tabs | 显示标签内容,通常情况下是 Tab 也可以是 Widget | |
| controller | tabController对象 | |
| isScrollable | 是否可滚动 | bool |
| indicatorColor | 指示器颜色 | Color |
| indicatorWeight | 指示器高度 | Color |
| indicatorPadding | 底部指示器的Padding | |
| indicator | 指示器 Decoration | |
| indicatorSize | 指示器大小,TabbarIndicatorSize.label 文字等宽; .tab tab等宽 | |
| labelColor | 选中的 label 颜色 | Color |
| labelStyle | 选中的 label 的样式 | |
| labelPadding | 每个 label 的内边距 | |
| unselectedLabelColor | 未选中 label 的颜色 | Color |
| unselectedLabelStyle | 未选中的 label 的 style |
使用需要混入相关类
class xxx extends state<xxx> with SingleTickerProviderStateMixin{
// 定义 tabController
late TabController _xxx;
void initState(){
super.initState();
_xxx = TabController(length:8,vsync:this);
_xxx.addListener(){
if (_xxx.animation!.value == _xxx.index) {
print(_xxx.index); //获取点击或滑动页面的索引值
}
}
}
// 配置 Tabbar 和 TabBerView
Widget build(BuildContext context){
return Scaffold(
appBar:AppBar(
title:const Text("Flutter App"),
bottom:tabBar(
controller:_xxx,
tabs:const [
Tab(child:Text("热门")),
Tab(child:Text("热门1")),
Tab(child:Text("热门2")),
]
),
body:TabBarView(
controller:_xxx,
children:[
Text("热门"),
Text("热门1"),
Text("热门2"),
]
)
)
)
}
}
改变 appBar 的高度
使用 preferredSize 可以改变 appBar 的高度
Scaffold(
appBar:PreferredSize(
preferredSize:Size。fromHeight(50),
child:AppBar()
)
)