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 的修饰器,主要的功能是设置背景和边框。

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
              ),
            ),
          )
        ),
      ),
    );
  }
}
Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐