Container() 容器
可以指定大小，不指定大小的话根据子控件的大小设置大小，例如内部包含一个listview，listview默认
大小是铺满父容器并且不可以指定宽高，这样的话由于子空间是铺满，Container也会铺满他的父容器
Container指定了大小的话，listview只会铺满Container的大小
listview() 列表
本身不支持设置大小，默认会铺满自己的父容器
Center(） 居中
本身不支持设置大小，会默认铺满自己的父容器
text() 文本
本身的大小，即是文本内容的大小
Row(）和Column(） 线性布局
Row 和Column本身不支持设置大小，Row高度会随子控件的高度，Column高度会铺满父容器 ，
Row宽度会铺满父容器，Column宽度会随子控件大小
可以通过mainAxisSize: MainAxisSize.min, 让主轴大小自适应
crossAxisAlignment: CrossAxisAlignment.center, //通过交叉抽 设置对齐方式 交叉轴是主轴相反
mainAxisAlignment: MainAxisAlignment.center, //通过主轴设置对其方式 row=横 Column=竖
对齐参数：
//将子控件放在当前轴的开始位置 start
//将子控件放在当前轴的结束位置 end
//将子控件放在当前轴的中间位置 center
//将当前轴空白位置进行均分，排列子元素，手尾没有空隙 spaceBetween
//将当前轴空白区域均分，使中间各个子控件间距相等，首尾子控件间距为中间子控件间距的一
半 spaceAround
//将当前轴空白区域均分，使各个子控件间距相等 spaceEvenly
Expanded(） 权重
搭配Row(）和Column(） 相当于权重，默认会平均分配父容器的主轴大小，可以通过flex: 2,的值
来改变其中一个的权重大小
Stack(） 相对布局
默认情况下的大小是根据子控件的大小决定的，可以搭配Positioned使用进行定位
Positioned() 定位
结合Stack使用，没使用，上下左右，定位属性时候，大小会根据子容器决定，使用定位属性，此控件大小变成铺满屏幕，只不过子空间大小之外的空间，是空白没有绘制的区域，因为计算位置的时候得通过全屏来计算，所以大小变成全屏
ClipOval() 圆形
圆容器，结合image可以设置圆形图片，宽高适应子布局
Divider() 一条线
padding() 边距
包围在别的组件外边，提供外边距的组件
AspectRatio() 宽高比
设置宽高比的容器，并且最长的轴可以铺满父容器
card() 卡片布局
卡片布局
wrap() 流式布局
流式布局组件
bottomNavigationBar() 底部导航栏
底部导航栏，在Scaffol() 内部属性使用，默认是三个选项，大于三个需要开启type里面的属性
new Scaffold( //在Scaffold内使用
body: new Text("内容1"),
bottomNavigationBar: new BottomNavigationBar(
currentIndex: 1, //当前要显示页面的索引
items: [
BottomNavigationBarItem(
icon: new Icon(Icons.print),
title: new Text("页面1"),
),
BottomNavigationBarItem(
icon: new Icon(Icons.accessibility),
title: new Text("页面2"),
),
BottomNavigationBarItem(
icon: new Icon(Icons.ac_unit),
title: new Text("页面3"),
),
],
onTap: (items){ //当前点击的监听，参数是索引
print(items);
},
),
);
Button 按钮
image.png
image.png
RaisedButton() , //突起按钮
FlatButton() , //扁平化按钮
OutlineButton(),//线框按钮
ButtonBar(), //按钮组
FloatintActionBotton(), //浮动按钮
IconButton(), //图标按钮
TextField() 文本输入框
image.png
定义一个controller 属性 类型是TextEditingController() 属性的.text=文本框的值，绑定的时候里面的值就是默认值，没有默认值可以不给值
image.png
Radio() 单选
image.png
groupValue是谁的值，当前就是谁被选中
RadioListTitle() 单选，带图片的
image.png
Switch 开关按钮
image.png
Checkbos 多选按钮
image.png
image.png
DefaultTabController(） Tab切换效果
顶部tob栏，实现类似Android Tablayou+ViewPager的效果
DefaultTabController( //使用tab切换，必须嵌套在Scaffold外面
length: 3, //指定tab数量
child: new Scaffold(
appBar: new AppBar( //tab写在appBar里面
title: new Text("标题"), //appbar 的标题 如果不想要标题，不写此项tab上面会留出空白，可
//以直接把tabbar写在标题里面，不要bottom属性
bottom: new TabBar( //要标题的话，tab写在这里
isScrollable: true, //tabbar 是否可以滑动
tabs: <Widget>[
new Tab(text: "11111",),
new Tab(text: "2222",),
new Tab(text: "3333",),
],
),
),
body:TabBarView( //tab滑动切换的内容，根据个数索引相对应 类似VIewPager
children: <Widget>[
new Text("1111"),
new Text("2222"),
new Text("3333"),
],
)
)
);
TabController Tab切换效果
实现 Tab切换效果和上面一样，可以监听tab的事件，（推荐使用）
//必须创建一个有状态组件
class MyTabLayout extends StatefulWidget{
@override
_MyTabLayoutState createState() => _MyTabLayoutState();
}
//多继承 SingleTickerProviderStateMixin
class _MyTabLayoutState extends State<MyTabLayout> with SingleTickerProviderStateMixin{
TabController _tabController; //创建一个TabController的私有变量
@override
void initState() { //初始化方法
super.initState();
// Add code after super
_tabController=new TabController(length: 3, vsync: this); //设置两个属性，一个长度，一个对象
_tabController.addListener((){ //监听改变状态事件
print(_tabController.index); //打印当前点击的索引
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: TabBar(
controller: _tabController, //将tabController和TabBar进行关联
tabs: <Widget>[
Tab(text: "tab1",),
Tab(text: "tab2",),
Tab(text: "tab3",),
],
),
),
body: TabBarView(
controller: _tabController, //将tabController和TabBarView进行关联
children: <Widget>[
new Text("内容1"),
new Text("内容2"),
new Text("内容3"),
],
),
);
}
}
Drawer() 侧滑
Scaffold( //在Scaffold内设置
drawer: new Drawer(
child: new Text("左侧滑"),
),
endDrawer: new Drawer(
child: new Text("右侧滑"),
),
);
页面跳转 路由
//跳转到 MyHone 页面
Navigator.of(context).push(new MaterialPageRoute(builder: (context)=>new Myhome()));
//返回上一个页面
Navigator.pop(context);
//替换路由，跳转的同时把栈内当前页面替换成别的页面
Navigator.of(context).pushReplacement(new MaterialPageRoute(builder: (context)=>new Myhome()));
//跳转到一个页面，并且把栈内全部页面滞空，可用于返回根目录
Navigator.of(context).pushAndRemoveUntil(new MaterialPageRoute(builder: (context)=>new Myhome())
,(route)=>route==null);
image.png
DiaLog
image.png
image.png
image.png
image.png
image.png
image.png
自定义DiaLog
class MyDiaLog extends Dialog{
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Material(
type: MaterialType.transparency,
child: new Center(
child:Container(
width: 100,
height: 100,
color: Colors.blue,
) ,
),
);
}
}
//调用
showDialog(
context: context,
builder: (context){
return MyDiaLog();
});
网友评论