内容如果对你有帮助,帮忙点下赞,你的点赞是我更新最大的动力,谢谢啦!如果在开发的过程遇到问题可以一起讨论,可以加我的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<BottomNavigationWidget> {
int _currentIndex=0;
var appBarTitle=["组件","关于"];
var appBarIcon=[Icons.all_inclusive,Icons.blur_on];
List<Widget> 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: <Widget>[
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: <Widget>[
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: <Widget>[
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: <Widget>[
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: <Widget>[
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: <Widget>[
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: <Widget>[
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(第二期)
