Flutter slogan: everything is harmonic component. Like with other platforms, Flutter offers a range of components, there are basic components (Basics Widgets), texture components (Material Components), Cupertino and so on.
Flutter introduces the basic components, usage is relatively simple. Each component is in the form of a class. Flutter component properties are many, we can not remember every one, only the regular use or understand some of the key attributes, and then go see the specific attributes used. So-called "property, iron components running water."
This part describes the following components:
- Align-Align - alignment assembly
- Bar - Components
- Box - Component
- Button - Components
A, Align-Align - alignment assembly
A widget, the widget that can align its children, and can automatically adjust the size of the child widget size based.
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Align组件',
home: Scaffold(
appBar: AppBar(
title: Text('Align组件'),
),
body:Container(
// width: 200.0,
// height: 200.0,
color: Colors.red,
child: Align(
//对齐方式
//alignment: Alignment.bottomLeft,
//对齐方式使用x,y来表示 范围是-1.0 - 1.0
alignment: Alignment(-0.5,-1.0),
//宽高填充的系数
widthFactor: 3.0,
heightFactor: 3.0,
child: Container(
color: Colors.green,
width: 100.0,
height: 50.0,
child: Text('align',style: TextStyle(color: Colors.white),),
),
),
),
),
);
}
}Two, Bar - components
2.1 AppBar components
Right or left button on the status bar, a bar Material Design application, the tool bar and possibly other widget (such TabBar and FlexibleSpaceBar) composition.
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'AppBar组件',
home: Scaffold(
appBar: AppBar(
title: Text('标题'),
//左侧图标
leading: Icon(Icons.home),
//背景色
backgroundColor: Colors.green,
//居中标题
centerTitle: true,
actions: <Widget>[
IconButton(
icon: Icon(Icons.print),
tooltip: '打印',
onPressed: (){},
),
//菜单按钮
PopupMenuButton<String>(
itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
//菜单项
PopupMenuItem<String>(
value: 'friend',
child: Text('分享到朋友圈'),
),
PopupMenuItem<String>(
value: 'download',
child: Text('下载到本地'),
),
],
),
],
),
body: Container(),
),
);
}
}2.2 bottomNavigationBar
The bottom of the navigation bar can easily switch top view and browse between tap.
return BottomNavigationBar(
//底部按钮类型 固定样式
type: BottomNavigationBarType.fixed,
//按钮大小
iconSize: 24.0,
//点击里面的按钮回调的函数
onTap: _onItemTapped,
//当前选中项索引 高亮显示
currentIndex: _currentIndex,
//当类型为fixed时,选中项的颜色
fixedColor: Colors.red,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(title: Text('聊天'),icon: Icon(Icons.chat)),
BottomNavigationBarItem(title: Text('朋友圈'),icon: Icon(Icons.refresh)),
BottomNavigationBarItem(title: Text('我的'),icon: Icon(Icons.person)),
],
);2.3 ButtonBar
No container end alignment buttons ButtonBar
child: ButtonBar(
//对齐方式 默认为末端end
alignment: MainAxisAlignment.spaceAround,
),2.4 FlexibleSpaceBar
Collapsible app bar FlexibleSpaceBar
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled){
return <Widget>[
SliverAppBar(
//展开高度
expandedHeight: 150.0,
//是否随着滑动隐藏标题
floating: false,
//是否固定在顶部
pinned: true,
//可折叠的应用栏
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text(
'可折叠的组件',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
),
),
),
),
];
},
body: Center(
child: Text('向上提拉，查看效果'),
)
),
),
);2.5 SliverAppBar
Sliver app bar SliverAppBar
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled){
return <Widget>[
SliverAppBar(
//是否预留高度
primary:true,
//标题前面显示的一个控件
leading: Icon(Icons.home),
//操作按钮
actions: <Widget>[
Icon(Icons.add),
Icon(Icons.print),
],
//设置阴影值
elevation: 10.0,
//是否固定在顶部
pinned: true,
//可扩展区域高度
expandedHeight: 200.0,
//与floating结合使用
snap: false,
//是否随着滑动隐藏标题
floating: false,
//扩展区域
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text(
'这是一个很酷的标题',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
),
),
),
),
];
},
body: Center(
child: Text(
'拖动试试'
),
),
),2.6 SnackBar
Screen bottom of the message
return Center(
child: GestureDetector(
onTap: () {
final snackBar = new SnackBar(
//提示信息
content: Text('这是一个SnackBar'),
//背景色
backgroundColor: Colors.green,
//操作
action: SnackBarAction(
textColor: Colors.white,
label: '撤消',
onPressed: () {},
),
//持续时间
duration: Duration(minutes: 1),
);
Scaffold.of(context).showSnackBar(snackBar);
},
child: Text('显示屏幕底部消息'),
),
);2.7 TabBar
Tab, displaying a level of Material Design widget tab.
class DemoPageState extends State<DemoPage> with SingleTickerProviderStateMixin {
ScrollController _scrollViewController;
TabController _tabController;
@override
void initState(){
super.initState();
_scrollViewController = new ScrollController();
//长度要和展示部分的Tab数一致
_tabController = new TabController(vsync: this,length: 6);
}
@override
void dispose(){
super.initState();
_scrollViewController.dispose();
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return SizedBox(
height: 500.0,
child: Scaffold(
appBar: AppBar(
title: Text('选项卡'),
//前置图标
leading: Icon(Icons.home),
//应用栏背景色
backgroundColor: Colors.green,
//选项卡
bottom: TabBar(
controller: _tabController,
//是否可以滚动
isScrollable: true,
tabs: <Widget>[
Tab(text: '科技',icon: Icon(Icons.camera),),
Tab(text: '吃饭',icon: Icon(Icons.print),),
Tab(text: '体育',icon: Icon(Icons.favorite),),
Tab(text: '娱乐',icon: Icon(Icons.share),),
Tab(text: '电影',icon: Icon(Icons.video_call),),
Tab(text: '教育',icon: Icon(Icons.airline_seat_flat_angled),),
]
),
),
//选项卡视图
body: TabBarView(controller: _tabController,
children: <Widget>[
Text('选项卡1'),
Text('选项卡2'),
Text('选项卡3'),
Text('选项卡4'),
Text('选项卡5'),
Text('选项卡6'),
]
),
),
);
}
}Three, Box - Component
3.1 ConstrainedBox
限定最大最小宽高容器，对其子项施加附加约束的 widget
//添加一个指定大小的盒子，限定其最大最小宽高
ConstrainedBox(
constraints: const BoxConstraints(
minWidth: 100.0,
minHeight: 20.0,
maxHeight: 60.0,
maxWidth: 200.0,
),
child: Container(
width: 250,
height: 80,
child: Text(
'width>maxWidth height>maxHeight',
style: TextStyle(color: Colors.white),
),
color: Colors.green,
),
),3.2 DecoratedBox
装饰容器，DecoratedBox 可以在其子 widget 绘制前(或后)绘制一个装饰 Decoration（如背景、边框、渐变等）。
//添加装饰
child: DecoratedBox(
//装饰定位 DecorationPosition.background背景模式 DecorationPosition.foreground前景模式
position: DecorationPosition.background,
decoration: BoxDecoration(
//背景色
color: Colors.grey,
//设置背景图片
image: DecorationImage(
//图片填充方式
fit: BoxFit.cover,
image: ExactAssetImage('assets/view.jpeg'),
),
//边框弧度
//borderRadius: BorderRadius.circular(10.0),
border: Border.all(
//边框颜色
color: Colors.red,
//边框粗细
width: 6.0,
),
//边框样式
shape: BoxShape.rectangle,
),
child: Text('定位演示',style: TextStyle(fontSize: 36.0,color: Colors.green),),
),3.3 FittedBox
填充容器，按自己的大小调整其子 widget 的大小和位置。 FittedBox
/*
BoxFit.fill //全部显示，显示可能拉伸，充满
BoxFit.contain //全部显示，显示原比例，不需充满
BoxFit.cover //显示可能拉伸，可能裁剪，充满
BoxFit.fitWidth //显示可能拉伸，可能裁剪，宽度充满
BoxFit.fitHeight //显示可能拉伸，可能裁剪，高度充满
BoxFit.none
BoxFit.scaleDown //效果和contain差不多,但是此属性不允许显示超过源图片大小，可小不可大
*/
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'FittedBox填充容器',
home: new Scaffold(
appBar: new AppBar(
title: new Text('FittedBox填充容器'),
),
body: Center(
child: Column(
children: <Widget>[
Container(
width: 300.0,
height: 300.0,
color: Colors.grey,
child: FittedBox(
//填充类型
fit: BoxFit.none,
//居中对齐
alignment: Alignment.center,
child: Image.asset('assets/view.jpeg'),
),
),
],
),
),
),
);
}
}3.4 OverflowBox
溢出容器，对其子项施加不同约束的 widget，它可能允许子项溢出父级。 OverflowBox
//溢出容器
child: OverflowBox(
//对齐方式
alignment: Alignment.topLeft,
//限制条件
maxWidth: 300.0,
maxHeight: 500.0,
child: Container(
color: Colors.blueGrey,
width: 400.0,
height: 400.0,
),
),3.5 RotatedBox
旋转容器，可以延顺时针以90度的倍数旋转其子 widget。RotatedBox
body: Center(
child: Column(
children: <Widget>[
SizedBox(
height: 20.0,
),
RotatedBox(
child: Text('ABCDE',style: TextStyle(fontSize: 28.0),),
//旋转次数 每次旋转一圈的1/4
quarterTurns: 1,
),
SizedBox(
height: 20.0,
),
RotatedBox(
child: Text('ABCDE',style: TextStyle(fontSize: 28.0),),
quarterTurns: 2,
),
SizedBox(
height: 20.0,
),
RotatedBox(
child: Text('ABCDE',style: TextStyle(fontSize: 28.0),),
quarterTurns: 3,
),
SizedBox(
height: 20.0,
),
RotatedBox(
child: Text('ABCDE',style: TextStyle(fontSize: 28.0),),
quarterTurns: 4,
),
],
),
),3.6 SizedBox
指定宽高容器，一个特定大小的盒子。这个 widget 强制它的孩子有一个特定的宽度和高度。如果宽度或高度为 NULL，则此 widget 将调整自身大小以匹配该维度中的孩子的大小。
body:Center(
//指定宽高容器 child不允许超出指定大小的范围
child: SizedBox(
width: 200.0,
height: 200.0,
//限定图片大小
child: Image.asset('assets/cat.jpeg'),
//子元素
// child: Container(
// width: 10.0,
// height: 10.0,
// color: Colors.green,
// ),
),
),四、Button – 组件
4.1 DropdownButton
下拉按钮 DropdownButton
class DropdownButtonDemo extends StatelessWidget {
List<DropdownMenuItem> generateItemList(){
final List<DropdownMenuItem> items = new List();
final DropdownMenuItem item1 = new DropdownMenuItem(child: Text('北京'),value: '北京',);
final DropdownMenuItem item2 = new DropdownMenuItem(child: Text('上海'),value: '上海',);
final DropdownMenuItem item3 = new DropdownMenuItem(child: Text('广州'),value: '广州',);
final DropdownMenuItem item4 = new DropdownMenuItem(child: Text('深圳'),value: '深圳',);
items.add(item1);
items.add(item2);
items.add(item3);
items.add(item4);
return items;
}
@override
Widget build(BuildContext context) {
return DropdownButton(
//提示文本
hint: Text('请选择一个城市'),
//下拉列表项数据
items: generateItemList(),
value: selectItemValue,
//下拉三角型图标大小
iconSize: 48.0,
//下拉文本样式
style: TextStyle(
color: Colors.green,
),
//设置阴影高度
elevation: 24,
//将下拉框设置为水平填充成父级
isExpanded: true,
//下拉改变事件
onChanged: (T){
var obj = T;
},
);
}
}4.2 FlatButton
一个扁平的 Material 按钮.
</center>
FlatButton.icon(
onPressed: (){
},
icon: Icon(Icons.print,size: 36.0,),
label: Text('默认按钮',style: TextStyle(fontSize: 36.0),),
),
FlatButton(
//文本
child: Text(
'Success',
style: TextStyle(fontSize: 26.0),
),
//按钮背景色
color: Colors.green,
//按钮亮度
colorBrightness: Brightness.dark,
//失效时的背景色
disabledColor: Colors.grey,
//失效时的文本色
disabledTextColor: Colors.grey,
//文本颜色
textColor: Colors.white,
//按钮主题 ButtonTheme ButtonThemeData ButtonTextTheme ThemeData
textTheme: ButtonTextTheme.normal,
//墨汁飞溅的颜色
splashColor: Colors.blue,
//抗锯齿能力
clipBehavior: Clip.antiAlias,
//内边距
padding: new EdgeInsets.only(
bottom: 5.0,
top: 5.0,
left: 20.0,
right: 20.0,
),
),4.3 FloatingActionButton
跟 iOS 手机的小白点一样，一个圆形图标按钮，它悬停在内容之上，以展示应用程序中的主要动作。FloatingActionButton 通常用于Scaffold.floatingActionButton 字段。
</center>
FloatingActionButton(
//图标
child: const Icon(Icons.person),
//提示信息
tooltip: '这是一个自定义的按钮',
//背景色
backgroundColor: Colors.blue,
//前景色
foregroundColor: Colors.white,
//hero效果使用
heroTag: null,
//未点击时的阴影
elevation: 8.0,
//点击时的阴影
highlightElevation: 16.0,
onPressed: () {},
// 是否为“mini”类型，默认为false,FAB 分为三种类型：regular, mini, and extended
mini: false,
//圆角方形的样式
shape: RoundedRectangleBorder(
side: BorderSide(
width: 2.0,
color: Colors.white,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.only(
topRight: Radius.circular(8.0),
topLeft: Radius.circular(8.0),
bottomRight: Radius.circular(8.0),
bottomLeft: Radius.circular(8.0),
),
),
),4.4 IconButton
一个 Material 图标按钮，点击时会有水波动画。
IconButton</cneter>
child: IconButton(
//图标
icon: Icon(Icons.print),
//图标大小
iconSize: 48.0,
//根据父容器来决定图标的位置
alignment: AlignmentDirectional.center,
color: Colors.green,
//墨汁飞溅效果
splashColor: Colors.blue,
padding: EdgeInsets.only(bottom: 5.0, top: 5.0, left: 30.0, right: 30.0),
//提示文本
tooltip: '一个打印图标',
//按下
onPressed: () {},
),4.5 RaisedButton
Material Design in the button, a raised rectangular button material.
RaisedButton
</center>
child: RaisedButton(
//文本
child: Text(
'点击登录按钮',
style: TextStyle(fontSize: 26.0),
),
//按钮背景色
color: Colors.green,
//按钮亮度
colorBrightness: Brightness.dark,
//失效时的背景色
disabledColor: Colors.grey,
//失效时的文本色
disabledTextColor: Colors.grey,
//文本颜色
textColor: Colors.white,
//按钮主题 ButtonTheme ButtonThemeData ButtonTextTheme ThemeData
textTheme: ButtonTextTheme.normal,
//墨汁飞溅的颜色
splashColor: Colors.blue,
//抗锯齿能力
clipBehavior: Clip.antiAlias,
//内边距
padding: new EdgeInsets.only(
bottom: 5.0,
top: 5.0,
left: 20.0,
right: 20.0,
),
shape: RoundedRectangleBorder(
side: new BorderSide(
width: 2.0,
color: Colors.white,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.only(
topRight: Radius.circular(10.0),
topLeft: Radius.circular(10.0),
bottomLeft: Radius.circular(10.0),
bottomRight: Radius.circular(10.0),
),
),
onPressed: () {
print('按钮按下操作');
},
),4.6 RawMaterialButton
body: RawMaterialButton(
onPressed: (){},
textStyle: TextStyle(fontSize: 28.0,color: Colors.black,),
//文本
child: Text('RawMaterialButton组件'),
//高亮时的背景色
highlightColor: Colors.red,
//墨汁飞溅
splashColor: Colors.blue,
//搞锯齿
clipBehavior: Clip.antiAlias,
padding: EdgeInsets.only(bottom: 5.0,top: 5.0,left: 30.0,right: 30.0),
//高亮时的阴影
highlightElevation: 10.0,
),to be continued
For more information you can click on to me, and very much like to share with everyone, and common progress About Me