2.Flutter学习之Container组件与Text组件详解

2022-02-09 15:54:28 浏览数 (1)

学习自: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,            //让内部子元素位于控件中的什么位置
      ),
    );
  }
}

0 人点赞