Flutter 基础Widget

flutter开发中一些常见的Widget

Text-文本
Text(
           '你好',
            // 文字样式
            style: new TextStyle(
              inherit: false,
              color: Colors.red, // 文字颜色
              backgroundColor: Colors.blue, // 背景色
              fontSize: 20, // 字体大小
              fontWeight: FontWeight.w400, // 字体粗细
              fontStyle: FontStyle.italic, // 正常还是斜体
              letterSpacing: 2, // 字符间距
              wordSpacing: 5, // 实测为单词间的间距
              textBaseline: TextBaseline.ideographic, // 基线模式
              height:2, // ??
              decoration: TextDecoration.underline, // 下划线
              decorationColor: Colors.black, // 划线的颜色
              decorationStyle: TextDecorationStyle.wavy, // 这个style可能控制画实线,虚线,两条线,点, 波浪线等
              decorationThickness:2, // 线的厚度
            ),
          )
RichText-富文本
RichText(
      text: TextSpan(
          text: '登录即视为同意',
          style: TextStyle(color: Colors.black, fontSize: 16),
          children: [
            TextSpan(
                text: '《xx协议》',
                style: TextStyle(color: Colors.blue),
                recognizer: new TapGestureRecognizer()
                  ..onTap = () {
                    print('点击协议');
                  }),
            WidgetSpan(child: Icon(Icons.account_balance)),
          ]),
    );
Image-图片
Image.asset:用来加载本地资源图片
Image.file:用来加载本地(File文件)图片
Image.network:用来加载网络图片
Image.memory:用来加载Uint8List资源(byte数组)图片
Button-按钮
class   描述
RaisedButton    凸起的按钮,其实就是Material Design风格的Button
FlatButton  扁平化的按钮
OutlineButton   线框按钮
IconButton  图标按钮
ButtonBar   按钮组
FloatingActionButton    浮动按钮

你可能感兴趣的:(Flutter 基础Widget)