Flutter中的text和container的使用说明
flutter一切皆为widget,text中的重要的属性举例:TextAlign(文本对齐方式)maxlines(设置最多显示的文本行数)overflow(设置文本溢出时候的显示方式)style(文本的显示风格)class TextApp extends StatelessWidget {final String text = 'Syncing files to device A...
·
flutter一切皆为widget,text中的重要的属性举例:
TextAlign(文本对齐方式)
maxlines(设置最多显示的文本行数)
overflow(设置文本溢出时候的显示方式)
style(文本的显示风格)
class TextApp extends StatelessWidget {
final String text = 'Syncing files to device Android Reloaded 2 of 420 libraries in 1,288ms.';
@override
Widget build(BuildContext context) {
//返回一个materialApp的对象 其中传入了title home等参数
return new MaterialApp(
title: 'text widget',
home: Scaffold(
body: Center( //body参数中传入一个center的widget 其中的child中传入text
child: Text(
//文本内容
text,
textAlign: TextAlign.left,//文本对齐方式
maxLines: 3,//文本最多的行数
overflow: TextOverflow.fade, //文本省略方式
style: TextStyle( //文本的style
fontSize: 40,
decoration: TextDecoration.underline,
decorationColor: Colors.blueGrey,
decorationStyle: TextDecorationStyle.dashed,
),
),
),
),
);
}
}
Container(容器控件)在Flutter是经常使用的控件,它就相当于HTML里的
标签,每个页面或者说每个视图都离不开它,一下实例介绍主要的属性的使用:
Alignment:这个属性针对的是Container内child的对齐方式,也就是容器子内容的对齐方式,并不是容器本身的对齐方式。
padding:padding的属性就是一个内边距,它和前端技术CSS里的padding表现形式一样,指的是Container边缘和child内容的距离。
margin:margin是外边距,指的是container和外部元素的距离。
decoration:decoration是 container 的修饰器,主要的功能是设置背景和边框。
Alignment:这个属性针对的是Container内child的对齐方式,也就是容器子内容的对齐方式,并不是容器本身的对齐方式。
padding:padding的属性就是一个内边距,它和前端技术CSS里的padding表现形式一样,指的是Container边缘和child内容的距离。
margin:margin是外边距,指的是container和外部元素的距离。
decoration:decoration是 container 的修饰器,主要的功能是设置背景和边框。
class ContainerApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
//返回一个materialApp的对象 其中传入了title home等参数
return new MaterialApp(
title: 'text widget',
home: Scaffold(
body: Center( //body参数中传入一个center的widget 其中的child中传入text
child: Container(
decoration: new BoxDecoration( //装饰属性 给container添加颜色
border: Border.all(color: Colors.red,width: 2),
gradient: const LinearGradient(colors: [Colors.blue,Colors.amber,Colors.red]),
),
height: 500, //设置container的宽和高
width: 300,
margin: EdgeInsets.only(left: 43),//container的外边距
padding: EdgeInsets.only(left: 100,top: 40), //内边距 container内部的widget的边距
alignment: Alignment.bottomCenter, //设置内部widget的对齐方式
//color: Colors.blue, //显色属性
child: new Text( //child属性可以在其中添加container中需要包含的widget
'hello nihao',
style: TextStyle( //设置文本的style
fontSize: 40
),
),
)
),
),
);
}
}
更多推荐


所有评论(0)