Flutter Container 组件、Text 组件详解

Text 组件

// Text组件用于显示简单样式文本,它包含了一些常用的设置参数。
// textAlign - 用于设置文本的对齐方式
// textDirection - 用于设置文本的显示方向
// overflow - 设置当文本超出屏幕时如何处理
// textScaleFactor - 字体的显示倍率
// maxLines - 文本的最大显示行数
// style - 用于设置文本的样式
Text(
   'wwww',
   style: TextStyle(
       color: Colors.red,
   ),
),

TextStyle 参数

// TextStyle用于定义文本的各种样式
decoration        // 文字的装饰线
decorationColor   // 文字装饰线的颜色
decorationStyle   // 文字装饰线的风格
wordSpacing       // 单词之间的空隙
letterSpacing     // 字母之间的空隙
fontStyle         // 字体样式
fontSize          // 字体大小
color             // 字体颜色
fontWeight        // 字体粗细

更多参数:https://docs.flutter.io/flutter/painting/TextStyle-class.html

Container 组件

// Container是一个方便的组合类widget,它可以包含其它widgets
alignment          // 用于对齐容器内的child
decoration         // 为容器设置装饰效果
constraints        // 为容器设置大小约束
margin              // 设置容器与外部组件的距离
padding             // 设置容器的内边距
transform           // 对容器进行一些旋转等变换
height              // 容器的高度
width               // 容器的宽度
child               // 容器的子widget

decoration: BoxDecoration(
  color: Colors.blue,
  border: Border.all(
    color: Colors.red,
    width: 2.0
  ),
  borderRadius: BorderRadius.all(
    Radius.circular(8.0)
  )
)

// 设置容器的最大最小宽度和高度
constraints: BoxConstraints(   
    minWidth: 180,
    minHeight: 50,
),

更多参数:https://api.flutter.dev/flutter/widgets/Container-class.html

posted on 2020-02-18 15:31  完美前端  阅读(1161)  评论(0)    收藏  举报

导航