flutter 开发常用Widget

Text组件及其属性：

//基础格式。Text组件
import 'package:flutter/material.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Text Widgetdddddd',
        home: Scaffold(
          body: Center( 
            child: Text(
              'Heldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgest',
              textAlign: TextAlign.center,
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                  fontSize: 25.0, color: Color.fromARGB(255, 255, 127, 127)),
            ),
          ),
        ));
  }
}

TextAlign属性：对齐方式

三个对齐方式，left(左对齐)、center（居中对齐）、right（右对齐）

overflow属性：overflow属性是用来设置Text文本组件文本溢出时处理的方式

• clip：直接切断，剩下的文字就没有了，感觉不太友好，体验性不好。
• ellipsis:在后边显示省略号，体验性较好，相当于Android的属性 android:ellipsize="end"
• fade: 溢出的部分会进行一个渐变消失的效果，当然是上线的渐变，不是左右的哦。

style属性 ：设置大小，颜色，下划线等

Container容器控件及其属性：

 Container（容器控件）在Flutter是经常使用的控件，它就相当于我们HTML里的

标签，能设置padding，margin，高度，border，内容的对齐方式等

Container(
          margin: EdgeInsets.all(ScreenUtil().setSp(48)),
          height: ScreenUtil().setSp(400),
          decoration: BoxDecoration(
            color: BG_WIDGET_COLOR,
            borderRadius: BorderRadius.circular(ScreenUtil().setSp(16)),
            boxShadow: [
              BoxShadow(
                color: COMMON_FONT_COLOR,
                offset: Offset(0.0, 0.0), //阴影xy轴偏移量
                blurRadius: 6.0, //阴影模糊程度
                spreadRadius: 1.0 //阴影扩散程度
              )
            ]
          ),
          child: SizedBox();
        )

图片组件及其属性：

Image.asset(
            'images/no_data.png',
            width: ScreenUtil().setWidth(512),
            height: ScreenUtil().setHeight(512),
            color: SELECTED_FONT_COLOR,
          ),

 加入图片的几种形式

1. Image.asset:加载资源图片，就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积，用的是相对路径。
2. Image.network:加载一张网络资源图片，比如百度图标：https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
3. Image.file:加载本地图片，就是加载本地文件中的图片，这个是一个绝对路径，跟包体无关。
4. Image.memory: 加载Uint8List资源图片。

fit属性可以控制图片的拉伸和挤压 

repeat属性 

• ImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整个画布。

• ImageRepeat.repeatX: 横向重复，纵向不重复。

• ImageRepeat.repeatY：纵向重复，横向不重复。

ListView 列表组件及其属性：

实现列表结构，直接使用按简单列表排序

ListTile 是Flutter 给我们准备好的widget 提供非常常见的构造和定义方式，包括文字，icon，点击事件，一般是能够满足基本需求，但是就不能自己定义了

ListView builder

builder 顾名思义 构造 可以非常方便的构建我们自己定义的child布局，所以在Flutter中非常的常用。

常用就这俩种。其他属性可自行查看

Column和Row列表组件及其属性：

Row（水平布局控件）、Column（垂直布局控件）

Column和Row，顾名思义一个是水平排列和垂直排列其内部children widget，
借鉴了Web中Flex布局，所以很多属性和表现，都跟其相似。

MainAxisAlignment:主轴方向上的对齐方式，会对child位置起作用，默认是start；

MainAxissSize：在主轴方向占有空间的值，默认是max。（max、min）；

CrossAxisAlignment：children在交叉轴方向的对齐方式，

Row和Column源码就一个够着函数，具体的实现全部都是在他们的父类Flex中

Flex构造函数：

Flex({
  Key key,
  @required this.direction,
  this.mainAxisAlignment = MainAxisAlignment.start,
  this.mainAxisSize = MainAxisSize.max,
  this.crossAxisAlignment = CrossAxisAlignment.center,
  this.textDirection,
  this.verticalDirection = VerticalDirection.down,
  this.textBaseline,
  List children = const [],
})

其中direction是控制水平还是垂直的，当为Axis.horizontal的时候，则是Row，当为Axis.vertical的时候，则是Column。

Expanded 布局

Expanded是用于展开Row，Column或Flex的子child的Widget。 使用Expanded可以使[Row]，[Column]或[Flex]的子项扩展以填充主轴中的可用空间。

 Row、Column、Flex会被Expanded撑开，充满主轴可用空间。

Row(
  children: [
    Container( /// 此组件在主轴方向占据48.0逻辑像素
      width: 48.0
    ),
    Expanded(
      child: Container() /// 此组件会填满Row在主轴方向的剩余空间，撑开Row
    )
  ]
)