Container(Single-Child)单一元素组件【child】
Row、Column多元素组件【child】
-
Icon:矢量图标字体：iconFont：
- 优势：
- 尺寸不管怎么变，图标本身都是清晰的，且没有锯齿,
- 可以修改颜色：
- 还支持传入图片 (
icon: 'images/icon.png')
- 缺点：只能设置纯色，不能设置渐变色
- 优势：
-
Image 图片加载
- 本地AssetImage
AssetImage('images/image_icon.png') - 网络图：NetworkImage
NetworkImage('imageUrl') - 文件中加载: Image.file
- 内存中加载: Image.memory
- 每种方式继承了各自的ImageProvider
- 本地AssetImage
-
Button
- RaisedButton 点击带波纹效果，且有阴影
RaisedButton( color: Colors.blue, child: Text("RaisedButton"), textColor: Colors.white, onPressed: () => {}, ),- FloatButton: 没有背景
FlatButton( textColor: Colors.blue, child: Text("FloatButton"), onPressed: () { print("FlatButton"); }, ),- OutlineButton: 带边框按钮,点击时边框和背景颜色呈现高亮状态
OutlineButton( textColor: Colors.blue, child: Text("OutlineButton"), onPressed: () { print("OutlineButton"); }, ),- FloatingActionButton：一般一个界面只有一个，用于分享，导航
FloatingActionButton( child: Text("F"), onPressed: () { print("F"); }, )-
自定义按钮：找到其父类，重写相关属性
效果图
FlutterLogo:顾名思义Flutter的Logo，传入size可改变logo的大小,可以做定位
1.SingleChild
①.Container
- 对其方式：alignment 范围(-1,1)
-
左上角：(
-1,-1) -
右上角：(
1,-1) -
左下角：(
-1,1) -
右下角：(
1,1) - 中间：(0,0)
-
左上角：(
- 设置约束
-
BoxConstraint(
minWidth、minHeight、maxWidth、maxHeight)
-
BoxConstraint(
```dart
Container(
color: Colors.green,
alignment: Alignment(0.0, 0.0),
child: new Text("Container"),
constraints: BoxConstraints(
maxHeight: 300.0,
maxWidth: 300.0,
minWidth: 200.0,
minHeight: 120.0),
)
```
- Container中child设置最大 BoxConstraints.expand
Container(
color: Colors.blue,
child: Text("Flutter"),
constraints: BoxConstraints.expand(),
)
- expand中可以设定容器的宽高
constraints: BoxConstraints.expand(width: 250.0, height: 100.0),
- margin(外边距) 和 padding(内边距)
margin: EdgeInsets.only(top: 60.0),
padding: EdgeInsets.only(top: 60.0),
//EdgeInsets 其他写法
EdgeInsets.symmetric('对称')
EdgeInsets.fromLTRB(位置)
EdgeInsets.all(全部)
-
decoration 装饰器- 支持背景图
image: -
渐变色
gradient: LinearGradient() -
圆角
borderRadius - 阴影 boxShadow
-
旋转
transform: Matrix4.rotationZ(.3), -
边框
border: Border.all(width: 3, color: Color(0xffaaaaaa))
- 支持背景图
②SingleChildScrollView-滚动布局
- 组件是负责滚动的，里面只能嵌套一个组件
- Column布局超出屏幕后不能滚动，需要在外层嵌套SingleChildScrollView才可以
- 可以设置滚动方向，也可以通过reverse 属性设置阅读顺序
- 还可以解决TextField布局溢出问题
③FittedBox 缩放
负责对组件进行缩放和位置调整
-
fit 缩放方式缩放本身占据FittedBox的大小，默认值BoxFit.contain子组件的宽度或高度被缩放到父容器限定的值时，就会被停止缩放
- alignment 对齐方式
Row(
children: <Widget>[
Container(
color: Colors.blue,
width: 80.0,
height: 80.0,
margin: EdgeInsets.only(bottom: 10.0),
child: new FittedBox(
fit: BoxFit.contain,
alignment: Alignment.topLeft,
child: new Container(
color: Colors.yellow,
child: new Text("FittedBox"),
),
),
),
Text(
"BoxFit.contain",
style: new TextStyle(fontSize: 20.0),
)
],
)
15730043034089.jpg
④FractionallySizedBox 宽度和高度缩放
- 基于宽度缩放因子和高度缩放因子来调整布局
- 大小有可能超出其父组件的设置
- 如果FractionallySizedBox中子组件设置了大小，则不会起作用,会被覆盖掉
Container(
color: Colors.blue,
height: 130.0,
width: 130.0,
padding: EdgeInsets.all(5.0),
child: new FractionallySizedBox(
alignment: Alignment.topLeft,
widthFactor: 1.5,
heightFactor: 0.5,
child: new Container(
color: Colors.yellow,
),
),
)
15730905004805.jpg
⑤ConstrainedBox-限制约束
- 在其约定范围内，其子组件是不能逾越的
- ConstrainedBox中主要是constraints起作用，而且这个值不能为null(空)
ConstrainedBox(
constraints: BoxConstraints(
minWidth: 100.0,
minHeight: 100.0,
maxWidth: 250.0,
maxHeight: 250.0,
),
child: new Container(
width: 500.0,
height: 300.0,
color: Colors.blue,
child: Text(
"100010001000100010001000100010001000100010001000100010001000100010001000100010001000100010001000",
style: new TextStyle(color: Colors.black, fontSize: 20.0),
// 设置省略号
overflow: TextOverflow.ellipsis,
// 设置最大行数
maxLines: 1,
),
),
)
15730911486040.jpg
⑥BaseLine
- 一种基线的对其方式，把不相关的几个组件设置在同一条水平线上进行对齐
- baseline 设置位置,单位是浮点型(不能为空)
- baselineType 不能为空
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Baseline(
baseline: 80.0,
baselineType: TextBaseline.alphabetic,
child: new Text(
'今天天气真好',
style: new TextStyle(
fontSize: 18.0,
color: Colors.red,
textBaseline: TextBaseline.alphabetic,
),
),
),
new Baseline(
baseline: 100.0,
baselineType: TextBaseline.alphabetic,
child: new Text(
'适合晨练',
style: new TextStyle(
fontSize: 30.0,
color: Colors.blue,
textBaseline: TextBaseline.alphabetic,
),
),
),
new Baseline(
baseline: 120.0,
baselineType: TextBaseline.alphabetic,
child: FlutterLogo(
size: 100,
),
),
],
)
效果图
2.Multi-Child 多元素组件
①Scaffold
Scaffold 是基于Material的一个标准化的布局容器
- 常见属性
- AppBar
- body
- bottomNavigationBar
- floatingActionButton
- drawer ...
②AppBar
顶部导航栏，用于控制App的路由、显示标题栏，返回按钮以及右侧操作栏（屏幕顶端）
- 常见属性
- leading 返回按钮
- title 标题组件
- actions 右侧按钮组件
- flexibleSpace
- bottom 底部区域
效果图
class AppBarWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('本地优惠'),
leading: IconButton(
icon: new Icon(Icons.face),
onPressed: () {
Navigator.pop(context);
}),
actions: <Widget>[
IconButton(
icon: Icon(Icons.playlist_play),
tooltip: 'tooltip1',
onPressed: () {},
),
IconButton(
icon: Icon(Icons.playlist_add),
tooltip: 'tooltip2',
onPressed: () {},
),
IconButton(
icon: Icon(Icons.playlist_add_check),
tooltip: 'tooltip3',
onPressed: () {},
),
],
),
body: Column(
children: <Widget>[
FlutterLogo(
size: 100.0,
colors: Colors.red,
)
],
),
);
}
}
效果图
③Row 和 Column 水平和纵向布局
-
Column不支持滚动，想支持滚动，需要考虑使用ListView -
crossAxisAlignment子组件在纵轴的对其方式 -
mainAxisAlignment子组件在水平方向的对其方式 -
textDirection布局顺序，从左至由，从右至左 -
mainAxisSizemax表示尽可能多地占用水平方向位置，min则反之
注意
- 在Row 和 Column 里CrossAxis 和 Main Axis 是不一样的
- Row 布局 设置
crossAxisAlignment无效 - Column 布局 设置
mainAxisAlignment无效
效果图
④ListView
构建方式
- ListView
itemExtent预估行高-
shrinkWrap是否根据子组件的高度来设置ListView的高度, 默认为false -
RepaintBoundry当addRepaintBoundres为 true时，避免列表滚动式重绘 -
AutomaticKeepAlive当 addAutomaticKeepAlive为 true时，则ListView被划出的区域不被回收 -
scrollDirection: 设置组件滚动方向 (
Axis.horizontal) - 不指定itemCount，列表无限长
-
physics:是否可滑动- NeverScrollablePhysics (不滚动)
- BouncingScrollPhysics (iOS 效果)
- ClampingScrollPhysics (Android 效果)
-
FixedExtentScrollPhysics (固定范围滚动)-
ListWheelScrollView效果类似iOS PickerView
效果图
-
- ListView.builder：
IndexedWidgetBuilder，只返回一个组件 - ListView.bottom
- ListView.separated 分割线,区头,区位
- ListView.custom，通过SilverChildListDelegate来接收
IndexedWidgetBuilder
⑤GridView网格布局
1.GridView.count
- 初始化方法
GridView.count -
crossAxisSpacing: 水平子Widget之间间距 -
mainAxisSpacing: 垂直子Widget之间间距 -
padding: GridView内边距 -
crossAxisCount:一行的Widget数量 -
childAspectRatio:子Widget宽高比例 - children : 子Widget列表
GridView.count(
//水平子Widget之间间距
crossAxisSpacing: 10.0,
//垂直子Widget之间间距
mainAxisSpacing: 30.0,
//GridView内边距
padding: EdgeInsets.all(10.0),
//一行的Widget数量
crossAxisCount: 2,
//子Widget宽高比例
childAspectRatio: 2.0,
//子Widget列表
children: getWidgetList(),
);
2.GridView.builder
@override
Widget build(BuildContext context) {
List<String> datas = getDataList();
return GridView.builder(
itemCount: datas.length,
//SliverGridDelegateWithFixedCrossAxisCount 构建一个横轴固定数量Widget
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
//横轴元素个数
crossAxisCount: 3,
//纵轴间距
mainAxisSpacing: 20.0,
//横轴间距
crossAxisSpacing: 10.0,
//子组件宽高长度比例
childAspectRatio: 1.0),
itemBuilder: (BuildContext context, int index) {
//Widget Function(BuildContext context, int index)
return getItemContainer(datas[index]);
});
}
效果图
⑥CustomScrollView
两个组件结合起来形成一个滚动区域
import 'package:flutter/material.dart';
class CustomScrollViewWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
const SliverAppBar(
pinned: true,
expandedHeight: 250.0,
flexibleSpace: FlexibleSpaceBar(
title: Text('Demo'),
),
),
SliverGrid(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200.0,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 4.0,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.teal[100 * (index % 9)],
child: Text('grid item $index'),
);
},
childCount: 20,
),
),
SliverFixedExtentList(
itemExtent: 50.0,
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.lightBlue[100 * (index % 9)],
child: Text('list item $index'),
);
},
),
),
],
),
);
}
}
组件转换
- AppBar -> SliverAppBar
- GridView -> SliverGrid
- ListView -> SliverFixedExtentList
- 转换后的组件都是以(
Sliver)开头的，其本身是不具备滚动特征的，但是当放在CustomScrollView中之后，则可以实现滚动的功能
效果图
