美文网首页
2. Container和Text

2. Container和Text

作者: 努力生活的西鱼 | 来源:发表于2019-12-04 14:37 被阅读0次
Flutter
Container组件

Container组件是一个容器组件，类似于Html中的div。

Container({
  Key key,
  this.alignment, // 控制child的对齐方式
  this.padding, // decoration内部的空白区域
  Color color, // 背景色
  Decoration decoration, // 绘制在child后面的装饰，设置了decoration，就不能设置color属性，否则会报错，此时应该在decoration中进行颜色的设置
  this.foregroundDecoration, // 绘制在child前面的装饰
  double width, // container的宽度，设置为double.infinity可以强制在宽度上撑满
  double height, // container的高度，设置为double.infinity可以强制在高度上撑满
  BoxConstraints constraints, // 添加到child上额外的约束条件
  this.margin, // 外间距
  this.transform, // 设置container的变换矩阵，类型为Matrix4
  this.child, // container中的内容Widget
})

其中decoration可以设置边框，背景色，背景图片，圆角等属性，非常好用。对于transform这个属性，一般有过其他平台开发经验的，都大致了解，这种变换，一般不是变换的实际位置，而是变换的绘制效果，也就是说它的点击以及尺寸，间距等都是按照未变换前的。

Text组件

Text用于显示简单样式文本，它包含一些控制文本显示样式的一些属性

child: new Text(
         '学习Text',
         textAlign: TextAlign.center, //文本对齐方式  居中
         textDirection: TextDirection.ltr, //文本方向
         softWrap: false, //是否自动换行 false文字不考虑容器大小  单行显示   超出；屏幕部分将默认截断处理
         overflow: TextOverflow.ellipsis, //文字超出屏幕之后的处理方式  TextOverflow.clip剪裁   TextOverflow.fade 渐隐  TextOverflow.ellipsis省略号
         textScaleFactor: 2.0, //字体显示的赔率
         maxLines: 10, //最大行数
         style: new TextStyle(
           decorationColor: const Color(0xffffffff), //线的颜色
           decoration: TextDecoration
               .none, //none无文字装饰   lineThrough删除线   overline文字上面显示线    underline文字下面显示线
           decorationStyle: TextDecorationStyle
               .solid, //文字装饰的风格  dashed,dotted虚线(简短间隔大小区分)  double三条线  solid两条线
           wordSpacing: 0.0, //单词间隙(负值可以让单词更紧凑)
           letterSpacing: 0.0, //字母间隙(负值可以让字母更紧凑)
           fontStyle: FontStyle.italic, //文字样式，斜体和正常
           fontSize: 20.0, //字体大小
           fontWeight: FontWeight.w900, //字体粗细  粗体和正常
           color: const Color(0xffffffff), //文字颜色
   ),

相关文章