StatelessWidget与基础组件
Container
容器组件,继承自StatelessWidget
| Container参数 | 类型 | 说明 |
|---|---|---|
| key | Key | Container 唯一标识符，用于查找更新 |
| alignment | Alignment | 控制Container的对齐方式 |
| padding | EdgeInsets | EdgeInsets.only(left: )控制左边padding,EdgeInsets.all控制当前周围padding |
| margin | EdgeInsets | EdgeInsets.only(left: )控制左边margin,EdgeInsets.all控制当前周围margin |
| decoration | BoxDecoration | 绘制在 child 后面的装饰设置decoration后不能设置color否则会编译冲突导致报错 |
| color | Color | 设置背景色(不能和decoration装饰器的颜色重复,否则会报错) |
| width | double | Container 的宽度，设置为 double.infinity 可以强制在宽度上撑满，不设置， 则根据 child 和父节点两者一起布局 |
| height | double | Container 的高度，设置为 double.infinity 即可以强制在高度上撑满 |
| child | Widget | Container 中的内容 Widget |
| BoxDecoration参数 | 说明 |
|---|---|
| color | 设置背景色 |
| borderRadius | 设置容器圆角BorderRadius.all(Radius.circular(double)) /BorderRadius.only(left:,top:,right:,bottom) |
来看看代码吧:
注释写的很清楚,来看看最终的效果:
Text
文本组件
注:加粗的是必填参数
| Text参数 | 类型 | 说明 |
|---|---|---|
| date | String | 显示的内容 |
| maxLines | int | 显示最大行数,默认为0 |
| style | TextStyle | 文本样式，可定义文本的字体大小、颜色、粗细等 |
| textAlign | TextAlign | 文本的对齐方式 |
| textScaleFactor | double | 字体缩放系数,例如1.3比原来文字大30% |
| overflow | TextOverflow | TextOverflow.clip：剪切溢出的文本以修复其容器。TextOverflow.ellipsis：使用省略号表示文本已溢出。TextOverflow.fade：将溢出的文本淡化为透明。 |
| textDirection | TextDirection | 文字显示样式,第二行从左边显示TextDirection.ltr,从右到左使用TextDirection.rtl默认是从左到右 |
| TextStyle参数 | 类型 | 说明 |
|---|---|---|
| color | Color | 文本颜色 |
| decoration | TextDecoration | 下划线(TextDecoration.underline) 上划线（TextDecoration.overline) 删除线（TextDecoration.lineThrough) 无（TextDecoration.none） |
| decorationColor | Color | 绘制文本装饰的颜色 |
| decorationStyle | TextDecorationStyle | 画一条虚线 TextDecorationStyle.dashed 画一条虚线 TextDecorationStyle.dotted 画两条线 TextDecorationStyle.double 画一条实线 TextDecorationStyle.solid 画一条正弦线(波浪线) TextDecorationStyle.wavy |
| fontWeight | FontWeight | FontWeight.bold字体加粗 |
| fontStyle | FontStyle | FontStyle.italic 使用斜体 FontStyle.normal 使用直立 |
| textBaseline | TextBaseline | TextBaseline.alphabetic：文本基线是标准的字母基线 TextBaseline.ideographic：文字基线是表意字基线 |
| fontSize | double | 字体大小默认为14pt |
| letterSpacing | double | 水平字母之前的距离负数会让字母离得更近,以至于重合 |
| wordSpacing | double | 单词之间的距离负数会让字单词得更近,以至于重合 |
| background | Paint | 文本背景色 |
| foreground | Paint | 文本前景色,不能与color共存 |
| shadows | List<Shadow> | 边框、圆角、阴影、形状、渐变、背景图像等 |
直接上代码:
效果图:
(黄色背景是Container背景)
Icon
图标组件
CloseButton
关闭按钮组件
BackButton
返回按钮组件
Chip
Divider
分割线组件
Card
卡片组件
AlertDialog
弹框组件