基础控件

在Flutter中，UI小控件有两种设计风格，一种是Material设计，这是安卓的官方设计风格，另一种则是Cupertino风格，是iOS的官方设计风格。因此，当遇到带有这两个单词开头的控件时，我们应该明确他们表达的意思。

• 官方Widgets 介绍文档

• 官方Widgets API文档

• 中文 Widgets 介绍文档

Text

Image

构造方法

• Image : 从ImageProvider中获取图片
• Image.asset ：加载资源目录中的图片
• Image.network：加载网络图片
• Image.file：加载本地图片文件
• Image.memory：加载Uint8List资源图片

// 直接构造
Image(
  image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
)

// 调用相应的命名构造方法
Image.network('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg')

BoxFit 填充模式

文档地址

TextField

装饰器 InputDecoration

border的三种值

• InputBorder.none 没有边框
• OutlineInputBorder 线框
• UnderlineInputBorder 底边线，默认的

TextField(
      decoration: InputDecoration(
        border: OutlineInputBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(30), // 圆角
          ),
          borderSide: BorderSide(
            color: Colors.amber, //线框颜色为黄色
            width: 2,            //线框宽度为2
          ),
        ),

        labelText: "labelText",
        helperText: "helperText",
        hintText: "hintText",
        prefixIcon: Icon(Icons.perm_identity),
      ),
    );

小技巧

当输入框的默认线框无法满足时，可以使用Container容器自定义边框。这时候可以将装饰器设置为InputDecoration.collapsed(hintText: 'hint')表示禁用装饰线

输入校验 TextInputFormatter

inputFormatters属性需要我们提供一个TextInputFormatter 类型的列表，该类有三个子类提供我们使用

• WhitelistingTextInputFormatter 白名单校验，只允许输入符合规则的字符
• BlacklistingTextInputFormatter 黑名单校验，除了限定的字符其他的都可以输入
• LengthLimitingTextInputFormatter 长度限制，与maxLength作用类似

前两个在实际使用时，其实是使用的Dart中正则表达式

/// 黑名单校验 + 长度限制
inputFormatters: [
        BlacklistingTextInputFormatter(RegExp("[a-z]")),
        LengthLimitingTextInputFormatter(11)
      ],

/// 白名单校验
inputFormatters: [BlacklistingTextInputFormatter(RegExp("[0-9]"))],

Button

Button的通用属性

    RaisedButton(
      child: Text('凸起按钮'),
      onPressed: (){},
      color: Colors.blue[200],
      splashColor:Colors.yellow[100],
    ),

    FlatButton(
      child: Text('扁平按钮'),
      onPressed: (){},
      color: Colors.blue[200],
    ),

    OutlineButton(
      child: Text('线框按钮'),
      onPressed: (){},
      textColor: Colors.red,
      borderSide: BorderSide(color: Colors.red,),
    ),

Radio 与 Checkbox

Radio

    Row(
      children: <Widget>[
        Radio(
          value: 1,
          activeColor: Colors.pink,
          groupValue: this._sex,
          onChanged: (value) {
            setState(() {
              this._sex = value;
            });
          },
        ),
        Text('男'),
        Radio(
          value: 2,
          activeColor: Colors.pink,
          groupValue: this._sex,
          onChanged: (value) {
            setState(() {
              this._sex = value;
            });
          },
        ),
        Text('女'),
      ],
    ),

Checkbox

    Row(
      children: <Widget>[
        Checkbox(
          activeColor: Colors.pink,
          checkColor: Colors.blue,
          value: this._flag1,
          onChanged: (value) {
            setState(() {
              this._flag1 = value;
            });
          },
        ),
        Checkbox(
          activeColor: Colors.pink,
          checkColor: Colors.blue,
          value: this._flag2,
          onChanged: (value) {
            setState(() {
              this._flag2 = value;
            });
          },
        ),
      ],
    )

Chip

    Chip(
      avatar: Icon(Icons.add_alert),
      label: Text('我是一个标签'),
      deleteIcon: Icon(Icons.close),
      deleteIconColor:Colors.red,
      deleteButtonTooltipMessage:'点你妹',
      labelStyle: TextStyle(color: Colors.white),
      backgroundColor: Colors.blue,
      elevation:20,
      shadowColor:Colors.grey,
      onDeleted: (){
        print('onTap');
      },
    ),

Slider 与 CupertinoSlider

Slider

CupertinoSlider 控件属性与Slider 基本相同。

    Slider(
        label:'current ${valuec.round()}',
        max: 100,
        min: 0,
        divisions: 5,
        activeColor:Colors.blue,
        inactiveColor: Colors.yellow,

        value:this.valuec,
        onChanged: (double v) {
          setState(() {
            this.valuec = v;
          });
        },
        onChangeStart: (startValue) {
          print('Started at $startValue');
        },
        onChangeEnd: (newValue) {
          print('Ended on $newValue');
        },
    ),

Switch 和 CupertinoSwitch

Switch

CupertinoSwitch 的属性较少

    Switch(
      activeColor:Colors.red,
      activeTrackColor:Colors.yellow,
      inactiveThumbColor:Colors.pink[200],
      inactiveTrackColor:Colors.black,
      value: this.valuea,
      onChanged: (v) {
        setState(() {
          this.valuea = v;
        });
      },
    ),

公众号“编程之路从0到1”