常用组件

Container() 容器组件

类似于前端的div容器，自身具备width、height、color等诸多属性，其常用属性如下：

class CustomMoudle extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Container(      width: 200.0, // container容器宽度      height: 200.0, // container容器高度      color: Colors.redAccent, // 设置背景色      alignment: Alignment.center, // child元素内容居中显示      child: Text("主体内容"), // container容器内容    );  }}

key 唯一标识符

相当于前端div容器的ID属性，具有唯一性，事件的执行添加都是依据这个唯一标识符进行的

aliganment 对齐方式

设置child子元素在container中的对齐方式，常用属性值如下：

alignment: Alignment.center, 

padding 内边距

内边距，常用属性值如下：

padding: EdgeInsets.fromLTRB(left, top, right, bottom),

color 背景色

在前端中，color一般是用来设置字体颜色的，但是在这里color设置的是container容器背景色，常用属性值如下：

color: Colors.redAccent, // 系统自带color: Color(0xFFFFFFBA), // 16进制颜色

如果你想设置渐变色，建议使用decoration属性设置

decoration 样式

container容器的样式集合属性，基本所有样式都可以在这个里面定义，常用属性如下：

decoration: BoxDecoration(    color: Colors.red, // 设置背景色    border: Border.all(        color: Colors.yellow, // 边框颜色        width: 3.0 // 边框宽度    ),    borderRadius: BorderRadius.all(const Radius.circular(8.0)), // 边框倒角    image: DecorationImage(image: NetworkImage(_imageUrl), fit: BoxFit.fill), // 设置背景图    boxShadow: [        BoxShadow(            color: Color(0xffff0000), // 阴影颜色            blurRadius: 5.0, // 阴影扩散范围        )    ],    gradient: LinearGradient(        begin: Alignment.topLeft, // 渐变色开始位置        end: Alignment(0.2, 0.0), // 渐变色结束位置        colors: [            const Color(0xFFFFFFEE), // 渐变色：色值一            const Color(0xFF999999) // 渐变色：色值二        ],     ),),

Text() 文本组件

Text组件是用于展示文本的组件，是最基本的组件之一。常用属性如下：

Text(    "Hello", // 展示的文本内容，必填属性    textAlign: TextAlign.center, // 字体居中， 这个属性需要注意的是父元素必须是大于这个Text()组件的，否则是不生效的    textDirection: TextDirection.rtl, // 字体阅读方向，这里设置的是从右往左阅读    softWrap: false, // false：不换行    overflow: TextOverflow.ellipsis, // 溢出显示"..."    maxLines: 2, // 最大显示行数    style: TextStyle( // 文本样式        color: Colors.white,  // 字体颜色        fontSize: 20.0, // 字体大小        fontWeight: FontWeight.bold // 字体粗细    ),)

data 文本内容

用于设置Text()组件所需要展示的文本信息，该属性是必填属性，否则会报错。参数的数据类型是"String"类型

Text("Hello")

style 字体样式

类似于前端的"style"属性，用于设置字体大小，粗细，颜色等等，搭配"TextStyle()"控件一起使用

Text("Hello",     style:TextStyle(         color: Colors.white,         fontSize: 20.0     ))

textAlign 文本对齐方式

用于设置文本的对齐方式，类似于前端的"text-align"属性，用法也是一致的，参数的数据类型是"TextStyle"类型

注意：父元素空间大于Text空间的时候textAlign文本对齐方式才会产生效果

Text(    "Hello",    textAlign: TextAlign.center,)

textDirection 文本阅读方向

正常来说，一般文字的阅读基本都是从左到右阅读的，但是也有些国家是从右往左阅读的。所以才会提供这个属性，一般用在国际化app中，参数类型是"TextDirection"类型

注意：该属性会影响TextAlign.start和TextAlign.end的显示方向

Text(    "Hello",    textDirection: TextDirection.ltr,)

softWrap 换行

用于控制当前Text组件内文本是否会换行，参数是"bool（布尔）"类型

Text(    "Hello",    softWrap: false,)

overflow 文本溢出

用于设置文本溢出时的处理方式，一般是用来做文本溢出显示"..."这种需求的，参数是"TextOverflow"类型

Text(    "Hello",    overflow: TextOverflow.ellipsis,)

maxLines 行数

用于控制文本在允许换行时，最大显示的行数，超过的都会被隐藏

Text(    "Hello",    maxLines: 2, // 这里是设置文本最大显示2行)