Flutter学习笔记

Text Widget

1. 文本对齐方式：TextAlign

• center：居中
• left：左对齐
• right：右对齐

2. 设置最多显示行数：maxLines
3. 文本溢出处理方式：overflow

• clip：直接切断
• ellipsis：省略号
• fade：渐变消失的效果，上下渐变

4. 样式：style

Container

1. child的对齐方式： Alignment

• bottomCenter:下部居中对齐。
• botomLeft: 下部左对齐。
• bottomRight：下部右对齐。
• center：纵横双向居中对齐。
• centerLeft：纵向居中横向居左对齐。
• centerRight：纵向居中横向居右对齐。
• topLeft：顶部左侧对齐。
• topCenter：顶部居中对齐。
• topRight： 顶部居左对齐。

2. height:高度 width:宽度 color:颜色
3. margin: 内边距
   EdgeInsets.all()
EdgeInsets.fromLTRB()
4. padding: 外边距
5. decoration: ( container 的修饰器，主要的功能是设置背景和边框)
   decoration: BoxDecoration()
   border: container的边框
   border:Border.all(width:2.0,color:Colors.red)

Image

1. 加入图片的方式

• Image.asset: 加载项目资源目录中的图片，加入图片后会增大打包的体积，使用相对路径。
• Image.network: 加载网络资源图片。
• Image.file: 加载本地文件中的图片，使用绝对路径。
• Image.memory: 加载Uint8List资源图片。

2. fit属性

• fill 全图显示，充满整个容器
• contain 显示图片原比例
• cover 保持图片不变形的前提下，充满整个容器
• fitWidth 以宽度为基准充满容器
• fitHeight 以高度为基准充满容器
• scaleDown 效果和contain差不多，但是此属性不允许显示超过源图片大小，可小不可大

3. 图片与color的混合模式（colorBlendMode）

• color：要混合的颜色，单设置color的值无效
• colorBlendMode：混合模式，设置混合的样式

4. 图片的重复 （ImageRepeat）

• repeat 铺满整个画布
• repeatX 横向重复
• repeatY 纵向重复

ListView

ListView内部的children使用了widget数组，因为是一个列表，所以它接受一个数组。

1. listTite列表瓦片

• leading 列表前的icon图标
• title 列表标题

2. 设置ListView的滚动方向(scrollDirection)

• Axis.horizontal:横向滚动或者叫水平方向滚动
• Axis.vertical:纵向滚动或者叫垂直方向滚动

水平布局Row

1. 非灵活排列
   根据Row子元素的大小进行布局，若子元素不足，它会留有空隙；若子元素超出，它会警告。
   例如：RaisedButton
2. 灵活排列
   使用Expanded解决有空隙的问题，在按钮外加入Expanded就可以了。

垂直布局Column

Column属性与Row基本相同

1. 主轴和副轴的辨识

• 主轴(main轴)：column组件主轴是垂直
                           row组件主轴是水平
• 副轴(cross轴)：column组件副轴是水平
                           row组件副轴是垂直

2. mainAxisAlignment(主轴对齐方式)

   
   
   

   mainAxisAlignment参数.png

3. crossAxisAlignment(副轴对齐方式)

   
   
   

   crossAxisAlignment参数.png
4. 水平方向相对于屏幕居中 在child外层嵌套Center组件

层叠布局 Stack

1. alignment属性： 控制层叠的位置，在两个内容进行层叠时使用，有X轴距离和Y轴距离两个值，值的范围是0-1，都是从上层容器的左上角开始算起的。（这种方法只适用于两个组件进行层叠）
2. Position属性（多个组件进行层叠）

Positioned {
    top: 10.0,
    left: 10.0,
    child: Text('aaaaa')
}

卡片组件布局ListTile

1. 利用了ListTile实现内部列表，任何容器组件其实都可以使用ListTile
2. Divider() 用来生成一条分割线

构建数据结构类

声明一个Product的数据结构

 class Product {
   final String title;
   final String description;
    //构造函数
    Product(this.title,this.desciption);   
 }

使用这个数据结构

  class ProductList extens StatelessWidget {
    //定义一个product类型的数组
    final List 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: (){
              }
            )
          }
        )
      ).
    }
  }

页面导航

1. RaisedButton按钮组件

• child：存放容器，图标或文字。
• onPressed：点击事件的响应，可以调用Navigator组件。

2. Navigator

• push：跳转到下个页面，接受两个参数，上下文context和跳转函数(MaterialPageRoute)。
• pop：接收一个参数，上下文context