一、Text 组件
| 名称 |
功能 |
| textAlign |
文本对齐方式(center 居中，left 左 对齐，right 右对齐，justfy 两端对齐) |
| textDirection |
文本方向(ltr 从左至右，rtl 从右至 左) |
| overflow |
文字超出屏幕之后的处理方式(clip 裁剪，fade 渐隐，ellipsis 省略号) |
| textScaleFactor |
字体显示倍率 |
| maxLines |
文字显示最大行数 |
| style |
字体的样式设置 |
下面是 TextStyle 的参数
| 名称 |
功能 |
| decoration |
文字装饰线(none 没有线，lineThrough 删除线，overline 上划线，underline 下划线) |
| decorationColor |
文字装饰线颜色 |
| decorationStyle |
文字装饰线风格([dashed,dotted]虚线，double 两根线，solid 一根实线，wavy 波浪 线) |
| wordSpacing |
单词间隙(如果是负值，会让单词变得更紧凑） |
| letterSpacing |
字母间隙(如果是负值，会让字母变得更紧凑) |
| fontStyle |
文字样式(italic 斜体，normal 正常体) |
| fontSize |
文字大小 |
| color |
文字颜色 |
| fontWeight |
字体粗细(bold 粗体，normal 正常体) |
二、Container 组件
| 名称 |
功能 |
| alignment |
topCenter：顶部居中对齐 topLeft：顶部左对齐 topRight：顶部右对齐 center：水平垂直居中对齐 centerLeft：垂直居中水平居左对齐 centerRight：垂直居中水平居右对齐 bottomCenter 底部居中对齐 bottomLeft：底部居左对齐 bottomRight：底部居右对齐 |
| decoration |
容器装饰 |
| margin |
margin 属性是表示 Container 与外部其他组件的距离。 EdgeInsets.all(20.0), |
| padding |
padding 就是 Container 的内边距，指 Container 边缘与 Child 之间的距离 padding: EdgeInsets.all(10.0) |
| transform |
让 Container 容易进行一些旋转之类的 transform: Matrix4.rotationZ(0.2) |
| height |
容器高度 |
| width |
容器宽度 |
| child |
容器子元素 |
更多参数
// ContainerWidget.dart
import 'package:flutter/material.dart';
// 自定义 Container 组件
class ContainerWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Text(
"我是一个Container视图里面的文本",
textAlign: TextAlign.left, // 文本对齐方式
overflow: TextOverflow.ellipsis, // 文字超出屏幕之后的处理方式
maxLines: 2, // 最大显示2行
textScaleFactor: 1.8, // 文字缩放1.8倍
style: TextStyle(
fontSize: 16.0, // 文字大小
color: Colors.red, // 文字颜色
fontWeight: FontWeight.w800, // 文字粗细
fontStyle: FontStyle.italic, // 文字样式：斜体
decoration: TextDecoration.lineThrough, // 文字装饰线：删除线
decorationColor: Colors.white, // 文字装饰线颜色
decorationStyle: TextDecorationStyle.dashed, // 文字装饰线风格：虚线
letterSpacing: 5.0
),
),
height: 300.0,
width: 300.0,
decoration: BoxDecoration( // 容器装饰
color: Colors.blue, // 背景颜色
border: Border.all( // 边框
color: Colors.yellow,
width: 2.0
),
borderRadius: BorderRadius.all( // 圆角
Radius.circular(10)
)
),
padding: EdgeInsets.all(20), // 内边距统一设置
// padding: EdgeInsets.fromLTRB(10, 30, 5, 0), // 内边距分别设置：left, top, right, bottom
// margin: EdgeInsets.fromLTRB(10, 30, 5, 0), // 外边距分别设置：left, top, right, bottom
// transform: Matrix4.translationValues(100, 0, 0), // x方向偏移100
// transform: Matrix4.rotationZ(0.3), // Z 轴旋转
// transform: Matrix4.diagonal3Values(1.2, 1, 1), // 3D旋转
alignment: Alignment.bottomLeft // 内容底部左对齐
);
}
}
ContainerWidget.png
网友评论