Center:
子组件将在中心位置摆放,且只能控制子组件,不能控制子组件内的组件
Center(
child:
)
Container:
类似div
Container(
child:
height:浮点值
width:称名父元素,值可以设置成double.infinity
color:Colors.xx 背景色
decoration: BoxDecoration( 定义container的样式
color: Colors.pink, 背景色
border:Border.all( 边框
color:Colors.blue,
width:2.0
),
borderRadius: BorderRadius.all(Radius.circular(n)), 圆角
borderRadius: BorderRadius.circular(n), 圆角 或 利用 ClipOval组件设置圆角
),
padding:EdgeInsets.all(浮点值) , margin和padding设置一样
padding:EdgeInsets.fromLTRB(n, n, n, n),
padding:EdgeInsets.only(top:x,left:x,...)
transform:Matrix4.translationValues(x,y,z) , //位移变化
alignment: Alignment.bottomLeft 内部组件摆放位置
)
Text:
文本
Text('文本内容',
textAlign: TextAlign.center, 水平居中
style:TextStyle(
fontSize: 20.0,
color:Colors.purple,
fontWeight:FontWeight.bold,
decoration: TextDecoration.lineThrough, 下划线等样式
decorationColor: Colors.white, 下划线等颜色
decorationStyle: TextDecorationStyle.dotted 下划线的形式
), 字体样式
overflow: TextOverflow.ellipsis, 超出范围样式
maxLines: 2, 允许行数
textScaleFactor: 2, 字体放大倍数
代码示例:
import 'package:flutter/material.dart';
void main()
{
runApp(App());
}
class App extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home:Scaffold(
appBar: AppBar(title: Text('hello1')),
body:Home()
)
);
}
}
class Home extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child:Container(
child: Text('文本啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊嗷嗷嗷嗷',
textAlign: TextAlign.center, //水平居中
style:TextStyle(fontSize: 20.0,color:Colors.purple,fontWeight:FontWeight.bold,decoration: TextDecoration.lineThrough,decorationColor: Colors.white,decorationStyle: TextDecorationStyle.dotted ), //字体样式
overflow: TextOverflow.ellipsis, //超出范围
maxLines: 2, //允许行数
textScaleFactor: 2, //字体放大倍数
),
height: 300.0,
width: 300.0,
decoration: BoxDecoration( //定义背景container的样式
color: Colors.pink,
border:Border.all( //边框
color:Colors.blue,
width:2.0
),
borderRadius: BorderRadius.all(Radius.circular(8))
),
// padding:EdgeInsets.all(20.0) ,
padding: EdgeInsets.fromLTRB(10, 20, 30, 20),
transform:Matrix4.translationValues(100,0,0) , //变化
alignment: Alignment.bottomLeft,
)
);
}
}