Text Widget
- 文本对齐方式：TextAlign
- center：居中
- left：左对齐
- right：右对齐
- 设置最多显示行数：maxLines
- 文本溢出处理方式：overflow
- clip：直接切断
- ellipsis：省略号
- fade：渐变消失的效果，上下渐变
- 样式：style
Container
- child的对齐方式： Alignment
- bottomCenter:下部居中对齐。
- botomLeft: 下部左对齐。
- bottomRight：下部右对齐。
- center：纵横双向居中对齐。
- centerLeft：纵向居中横向居左对齐。
- centerRight：纵向居中横向居右对齐。
- topLeft：顶部左侧对齐。
- topCenter：顶部居中对齐。
- topRight： 顶部居左对齐。
- height:高度 width:宽度 color:颜色
- margin: 内边距
EdgeInsets.all()
EdgeInsets.fromLTRB() - padding: 外边距
- decoration: ( container 的修饰器，主要的功能是设置背景和边框)
decoration: BoxDecoration()
border: container的边框
border:Border.all(width:2.0,color:Colors.red)
Image
- 加入图片的方式
- Image.asset: 加载项目资源目录中的图片，加入图片后会增大打包的体积，使用相对路径。
- Image.network: 加载网络资源图片。
- Image.file: 加载本地文件中的图片，使用绝对路径。
- Image.memory: 加载Uint8List资源图片。
- fit属性
- fill 全图显示，充满整个容器
- contain 显示图片原比例
- cover 保持图片不变形的前提下，充满整个容器
- fitWidth 以宽度为基准充满容器
- fitHeight 以高度为基准充满容器
- scaleDown 效果和contain差不多，但是此属性不允许显示超过源图片大小，可小不可大
- 图片与color的混合模式（colorBlendMode）
- color：要混合的颜色，单设置color的值无效
- colorBlendMode：混合模式，设置混合的样式
- 图片的重复 （ImageRepeat）
- repeat 铺满整个画布
- repeatX 横向重复
- repeatY 纵向重复
ListView
ListView内部的children使用了widget数组，因为是一个列表，所以它接受一个数组。
- listTite列表瓦片
- leading 列表前的icon图标
- title 列表标题
- 设置ListView的滚动方向(scrollDirection)
- Axis.horizontal:横向滚动或者叫水平方向滚动
- Axis.vertical:纵向滚动或者叫垂直方向滚动
水平布局Row
- 非灵活排列
根据Row子元素的大小进行布局，若子元素不足，它会留有空隙；若子元素超出，它会警告。
例如：RaisedButton - 灵活排列
使用Expanded解决有空隙的问题，在按钮外加入Expanded就可以了。
垂直布局Column
Column属性与Row基本相同
- 主轴和副轴的辨识
- 主轴(main轴)：column组件主轴是垂直
row组件主轴是水平 - 副轴(cross轴)：column组件副轴是水平
row组件副轴是垂直
-
mainAxisAlignment(主轴对齐方式)
mainAxisAlignment参数.png
-
crossAxisAlignment(副轴对齐方式)
crossAxisAlignment参数.png
- 水平方向相对于屏幕居中 在child外层嵌套Center组件
层叠布局 Stack
- alignment属性： 控制层叠的位置，在两个内容进行层叠时使用，有X轴距离和Y轴距离两个值，值的范围是0-1，都是从上层容器的左上角开始算起的。（这种方法只适用于两个组件进行层叠）
- Position属性（多个组件进行层叠）
Positioned {
top: 10.0,
left: 10.0,
child: Text('aaaaa')
}
卡片组件布局ListTile
- 利用了ListTile实现内部列表，任何容器组件其实都可以使用ListTile
- Divider() 用来生成一条分割线
构建数据结构类
声明一个Product的数据结构
class Product {
final String title;
final String description;
//构造函数
Product(this.title,this.desciption);
}
使用这个数据结构
class ProductList extens StatelessWidget {
//定义一个product类型的数组
final List<Product> products;
ProductList({Key key,@required this.products}):super(key:key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title:Text('商品列表'))，
body: ListView.builder(
itemCount: this.products.length,
itemBuilder: () {
return ListTile(
title: Text('${products[index].title}'),
onTap: (){
}
)
}
)
).
}
}
页面导航
- RaisedButton按钮组件
- child：存放容器，图标或文字。
- onPressed：点击事件的响应，可以调用Navigator组件。
- Navigator
- push：跳转到下个页面，接受两个参数，上下文context和跳转函数(MaterialPageRoute)。
- pop：接收一个参数，上下文context
网友评论