学习自:Dart Flutter教程_Dart Flutter入门实战视频教程-2019年新出. 记录一下Container组件以及Text组件常用的方法。
容器组件(Container)是一个组合Widget,内部有绘制Widget、定位Widget和尺寸Widget,包含一个子Widget,自身具备如alignment、pading等基础属性,方便布局过程中摆放child。Container组件常用属性如下表:
代码语言:javascript复制void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter demo'),
),
body: HomeContent(),
),
);
}
}
class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
child: Text(
'我是一个文本34434556465465464756456475645562432',
textAlign: TextAlign.right, //文本居中方式
overflow: TextOverflow.ellipsis, //设置溢出方式
maxLines: 1, //设置最大显示行数
style: TextStyle(
//设置字体风格
fontSize: 16.0,
//设置字体大小
color: Colors.red,
//设置字体颜色
fontWeight: FontWeight.w600,
//字体加粗
fontStyle: FontStyle.italic,
//字体倾斜
decoration: TextDecoration.lineThrough,
//设置文本线格式
decorationColor: Colors.white,
//设置文本线颜色
decorationStyle: TextDecorationStyle.dashed,
//设置虚线,实线,双实线等
letterSpacing: 20.0 //设置字母之间的间隔
),
),
height: 300,
width: 300,
decoration: BoxDecoration(
//装饰器,用于装饰Container组件
color: Colors.yellow, //设置背景颜色
border: Border.all(
//设置边框
color: Colors.cyanAccent, //边框颜色
width: 3.0, //边框宽度
),
borderRadius: BorderRadius.all(
Radius.circular(20), //设置边框圆角
),
),
margin: EdgeInsets.all(10), //外边距
padding: EdgeInsets.fromLTRB(10,10,10,10), //内边距
transform: Matrix4.skewX(10.0), //对Container进行旋转(rotation)为正为顺时针旋转,位移(translation),倾斜(skew),缩放(diagona)
alignment: Alignment.topLeft, //让内部子元素位于控件中的什么位置
),
);
}
}