内容如果对你有帮助,帮忙点下赞,你的点赞是我更新最大的动力,谢谢啦!如果在开发的过程遇到问题可以一起讨论,可以加我的QQ群!167646174!也可以加我微信,在群里!
具体代码见github ,欢迎各位Star,以及提issues!
1.ListTile
效果如上:
new ListTile(
// 前缀
leading:Icon(Icons.navigation),
// 标题
title: Text("导航栏组件",style:TextStyle(fontWeight:FontWeight.w500)),
// 副标题
subtitle: Text("常见的底部导航栏组件"),
// 后缀
trailing: Icon(Icons.chevron_right),
// 点击事件
onTap: (){
Navigator.push(
context,
MaterialPageRoute(
builder:(context)=>new BottomNavigation()
)
);
},
// 长按事件
onLongPress: (){
print("object");
}
)
API
作用
leading
前缀
title
标题
subtitle
副标题
trailing
后缀
onTap
点击事件
onLongPress
长按事件
2.规则的灵活导航栏
效果如上
class _BottomNavigationWidgetState extends State {
int _currentIndex=0;
var appBarTitle=["组件","关于"];
var appBarIcon=[Icons.all_inclusive,Icons.blur_on];
List list=List();
// 导航栏文字选中颜色
Text getTabTitle(int curIndex){
if(curIndex==_currentIndex){
return new Text(appBarTitle[curIndex],
style: new TextStyle(fontSize: 14.0,color:const Color(0xff845F3F)));
}else{
return new Text(appBarTitle[curIndex],
style: new TextStyle(fontSize: 14.0, color: const Color(0xff696969)));
}
}
// 小图标改变选中颜色
Icon getIcon(int curIndex){
if(curIndex==_currentIndex){
return Icon(appBarIcon[curIndex],color:const Color(0xff845F3F));
}else{
return Icon(appBarIcon[curIndex],color:const Color(0xff696969));
}
}
// 初始化方法
@override
void initState() {
list
..add(ComponentPage())
..add(AboutPage());
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: list[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
items: [
new BottomNavigationBarItem(icon: getIcon(0),title: getTabTitle(0)),
new BottomNavigationBarItem(icon: getIcon(1),title: getTabTitle(1)),
],
fixedColor: Colors.orange,
// 高亮选项
currentIndex: _currentIndex,
onTap: (int index){
setState(() {
_currentIndex=index;
});
},
),
);
}
}
3.floatingActionButton(不规则底部导航栏)
效果如上
return Scaffold(
// 首选项
body: _eachView[_index],
// 浮动按钮
floatingActionButton: FloatingActionButton(
// 长按复选按钮显示的文字
tooltip: "长按悬浮按钮显示",
// 按钮里面内容
child: Icon(
Icons.ac_unit,
color:Colors.white
),
// 点击事件
onPressed: (){
Navigator.of(context).push(MaterialPageRoute(builder:(BuildContext context){
return EachView('悬浮按钮新页面');
}));
},
),
// 悬浮按钮浮动的位置
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
color: Colors.blue,
shape: CircularNotchedRectangle(),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.max,
children: [
IconButton(
icon: Icon(Icons.access_time),
color: Colors.white,
onPressed: (){
setState(() {
_index=0;
});
},
),
IconButton(
icon: Icon(Icons.accessibility),
color: Colors.white,
onPressed: (){
setState(() {
_index=1;
});
},
)
],
),
),
);
floatingActionButton API
API
作用
child
子视图
tooltip
长按文字提示
foregroundColor
前景色
backgroundColor
背景色
heroTag
hero效果使用的tag,系统默认会给所有FAB使用同一个tag,方便做动画效果
hignlightElevation
点击时阴影值,默认12.0
onPressed
点击回调事件
mini
是否为mini,默认flase
shape
定义形状,设置shape时,默认的elevation将会失效,默认为CircleBorder
isExtended
是否为extended
4.AppBar
API
作用
leading
前缀,一般是一个icon
title
标题
actions
一系列最右边组件
flexibleSpace
bottom和appBar Title之间
bottom
如图
elevation
Appbar和Body整体之间那个横线阴影,默认为4,分隔开AppBar和整体内容
backgroundColor
背景色
brightness
亮度
iconTheme
Icon样式
textTheme
字体样式
centerTitle
标题位置,IOS默认显示居中,Android靠左,设置会显示统一
5.AppBar Tabs
效果如上:
return MaterialApp(
home: new DefaultTabController(
length:choices.length,
child: new Scaffold(
appBar: new AppBar(
title: Text("AppBar Tabs"),
bottom: new TabBar(
// tabs颜色选中颜色
labelColor:Colors.orange,
// tabs选中样式
labelStyle: TextStyle(fontSize: 18),
// tabs未选中的颜色
unselectedLabelColor: Colors.white,
// tabs未选中的样式
unselectedLabelStyle: TextStyle(fontSize: 10),
// 底部指示器的padding
indicatorPadding: const EdgeInsets.all(0),
// 底部指示器高度
indicatorWeight: 2,
//底部指示器颜色
indicatorColor: Colors.red,
// 指示器大小计算方式
// indicatorSize: ,
// 是否可滚动
// isScrollable: true,
tabs: [
Tab(text: "推荐",icon:Icon(Icons.ac_unit)),
Tab(text: "关注",icon:Icon(Icons.access_alarm)),
Tab(text: "热榜",icon:Icon(Icons.access_time)),
],
),
),
// tabs主体内容
body: new TabBarView(
children: [
new TestPage(),
new TestPage(),
new TestPage(),
],
),
),
),
);
API
作用
labelColor
tabs颜色选中颜色
labelStyle
tabs选中样式
unselectedLabelColor
tabs未选中的颜色
unselectedLabelStyle
tabs未选中的样式
indicatorPadding
底部指示器padding
indicatorWeight
底部指示器高度
indicatorColor
底部指示器颜色
indicatorSize
底部指示器大小计算方式
isScrollable
是否可以滚动
6.Row/Column 水平/垂直布局
Container(
height: 300,
color: Colors.yellow,
child: Row(
// 主轴(x)对齐方式
mainAxisAlignment: MainAxisAlignment.center,
// 副轴对齐方式
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: [
Container(
color: Colors.purple,
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.purple,
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.purple,
child: FlutterLogo(
size: 60.0,
),
),
],
),
),
Container(
width: 800,
height: 300,
color: Colors.red,
child: Column(
// 主轴(x)对齐方式
mainAxisAlignment: MainAxisAlignment.center,
// 副轴对齐方式
crossAxisAlignment: CrossAxisAlignment.center,
textBaseline: TextBaseline.alphabetic,
children: [
Container(
color: Colors.purple,
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.purple,
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.purple,
child: FlutterLogo(
size: 60.0,
),
),
],
),
),
API
作用
可选参数
mainAxisAlignment
主轴(x)对齐方式
MainAxisAlignment.start(默认值),center,end,spaceAround,spaceBetween,spaceEvenly
crossAxisAlignment
副轴对齐方式
CrossAxisAlignment.center (默认值),start,end,stretch,baseline
textDirection
文字对齐方式
TextDirection.ltr(默认),rtl
verticalDirection
和textDirection类似
VerticalDirection.down(默认),up
mainAxisSize
子组件占主轴空间大小
MainAxisSize.max(默认),min
一点特殊说明:
CrossAxisAlignment.baseline:子部件基线对齐
值为 CrossAxisAlignment.baseline时 必须同时使用 textBaseline, 否则会报错
没有用 baseline
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Flutter',
style: TextStyle(
color: Colors.red,
fontSize: 30.0
),
),
Text(
'Flutter',
style: TextStyle(
color: Colors.blue,
fontSize: 20.0
),
),
],
)
用 baseline
textBaseline: TextBaseline.alphabetic(中轴对齐)
textBaseline: TextBaseline.ideographic(底部对齐)
Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: [
Text(
'Flutter',
style: TextStyle(
color: Colors.red,
fontSize: 30.0
),
),
Text(
'Flutter',
style: TextStyle(
color: Colors.blue,
fontSize: 20.0
),
),
],
)
textDirection
Row 部件的 textDirection
TextDirection.rtl
文字从右到左排列,主轴(水平)方向 start->end 是 从右到左
TextDirection.ltr (默认)
从左往右排列,主轴(水平)方向 start->end 是 从左到右
verticalDirection
和 textDirection 类似
确定 Column 部件的垂直摆放方向
解释垂直方向的 start 和 end 方向
mainAxisSize
所有子部件占据主轴的空间大小
7.TextField
输入框
TextField(
enableInteractiveSelection: false,
// 禁止输入
enabled: true,
// 聚焦点颜色
cursorColor: Colors.red,
//聚焦点圆边角
cursorRadius: Radius.circular(10),
// 聚焦点宽度
cursorWidth: 1,
// 自动获取焦点
autofocus: false,
// 长度限制
// maxLength: 5,
// 是否为密码
obscureText: false,
// 输入框类型
keyboardType:TextInputType.number,
// 文本对齐方式
textAlign: TextAlign.center,
// 最大行数
maxLines: 1,
// 是否自动更正
autocorrect:true,
// 值改变事件
onChanged:_textFieldChanged,
//用户完成内容
onSubmitted:(text){},
// 内容提交(按回车键)
onEditingComplete:(){},
decoration: InputDecoration(
// 初始化的输入框比较高,这个解决高度
contentPadding: EdgeInsets.all(10.0),
//默认提示
hintText:"呵呵呵提示",
labelText: "输入",
helperText: "请输入你的输入",
border: OutlineInputBorder(
// 圆边角
borderRadius: BorderRadius.circular(15.0)
)
),
),
API
作用
可选参数
enableInteractiveSelection
为true的时候长按会显示系统粘贴板的内容
Boolean
enabled
禁止输入
Boolean
cursorColor
聚焦点的颜色
-
cursorRadius
聚焦点的园边角
-
cursorWidth
聚焦点宽度
-
autofocus
自动获取焦点
-
maxLength
长度限制
Number
obscureText
类型是否为密码
Boolean
keyboardType
输入框类型
-
textAlign
文本对齐方式
-
maxLines
最大行数
Number
autocorrect
是否自动更正
Boolean
onChanged
值改变事件
Func
onSubmitted
用户完内容事件
Func
onEditingComplete
内容提交Enter
Func
decoration
样式装饰器
-
具体代码见github ,欢迎各位Star,以及提issues
不定期更新,根据工作繁忙程度决定.
以下是相关文章flutter常见组件之Button(第二期)