一、Container Widget

Container 是在 Flutter 中使用非常多的 Widget,作用相当于 HTML 的 div 标签,大多数的 Widget 都可以放在 Container 中实现各种各样的 容器样式。

Container 支持设置的常用属性包括:

  • child: Widget // 可以省略子 Widget
  • color: Color // 与 decoration.color 冲突
  • margin:EdgeInsets
  • padding: EdgeInsets
  • width: double
  • height: double
  • transform: Matrix4
  • aligment: Aliment
  • decoration: BoxDecoration

    • boxShadow: BoxShadow
    • color: Color
    • border: Border
    • borderRadius: BorderRadius

上面的属性基本上支持的所有的样式设置,后面是各个属性支持的值类型

下面的代码应用了上面所有的样式:

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 300.0,
        width: 300,
        // padding: EdgeInsets.all(20),
        padding: EdgeInsets.fromLTRB(20, 10, 40, 20),
        margin: EdgeInsets.only(top: 100),
        transform: Matrix4.translationValues(10, 0, 0),
        // transform: Matrix4.rotationX(5),
        alignment: Alignment.bottomLeft,
        decoration: BoxDecoration(
          boxShadow: [
            // 阴影
            BoxShadow(
              color: Colors.grey[500],
              offset: Offset(10.0, 12.0),
              blurRadius: 4.0,
            ),
          ],
          color: Colors.pink,
          border: Border.all(
            color: Colors.black,
            style: BorderStyle.solid,
            width: 2,
          ),
          borderRadius: BorderRadius.all(
            Radius.circular(12),
          ),
        ),
      ),
    );
  }
}

样式结果:

30367-53fomuyhcs4.png

二、Text Widget

Text Widget 不用多说是对文本渲染的基础,也是 Flutter 的基础组件

下面是 Text 的构造函数:

70678-hgkppgqsjcq.png

从构造函数中可以看出,第一个参数 data 是必填参数,并且不是命名参数,其他的都是命名参数。

构造参数常用的类型如下:

构造参数类型说明
textAlignTextAlign文本对其方式
maxLines2最大行数
overflowTextOverflow截断方式
styleTextStyle文本样式

TextStyle 支持的属性包含很多,构造函数定义如下:

05916-qwvt0f1kre8.png

其中常用的构造参数的类型如下:

构造参数类型说明
fontSizedouble字符大小
colorColor颜色
letterSpacingdouble间距
fontStyleFontStyle文本样式
decorationTextDecoration文本中划线或下划线
decorationColorColor划线颜色
decorationStyleTextDecorationStyle划线样式

Container 和 Text 组合使用:

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Text(
          '超长文本截断字体等超长文本截断字体等超长文本截断字体等超长文本截断字体等超长文本截断字体等超长文本截断字体等超长文本截断字体等',
          textAlign: TextAlign.left,
          maxLines: 2,
          overflow: TextOverflow.ellipsis,
          style: TextStyle(
              fontSize: 16,
              color: Colors.white,
              letterSpacing: 2,
              fontStyle: FontStyle.italic,
              decoration: TextDecoration.underline,
              decorationColor: Colors.yellow,
              decorationStyle: TextDecorationStyle.dotted),
        ),
        height: 300.0,
        width: 300,
        // padding: EdgeInsets.all(20),
        padding: EdgeInsets.fromLTRB(20, 10, 40, 20),
        margin: EdgeInsets.only(top: 100),
        transform: Matrix4.translationValues(10, 0, 0),
        // transform: Matrix4.rotationX(5),
        alignment: Alignment.bottomLeft,
        decoration: BoxDecoration(
          boxShadow: [
            // 阴影
            BoxShadow(
              color: Colors.grey[500],
              offset: Offset(10.0, 12.0),
              blurRadius: 4.0,
            ),
          ],
          color: Colors.pink,
          border: Border.all(
            color: Colors.black,
            style: BorderStyle.solid,
            width: 2,
          ),
          borderRadius: BorderRadius.all(
            Radius.circular(12),
          ),
        ),
      ),
    );
  }
}

最终效果:

44608-l5c5c5h2ni.png

三、完整代码

github 地址: