04-Flutter 基础组件

基础组件：

• Text 文本
• Button 按钮
• Image 图片
• TextField 输入框，TextFormField 表单
• Switch-开关，CheckBox-复选框，ProgressIndicator-进度条

Text

Text(
  "哈哈哈哈哈哈哈哈哈哈或或或或或或哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈或或或或或或哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈或或或或或或哈哈哈哈哈哈哈",
  overflow: TextOverflow.clip, 
  textAlign: TextAlign.center, //textAlign 优先
  textDirection: TextDirection.rtl, //textAlign 优先
  style: TextStyle(),
),

富文本

Text.rich(
  TextSpan(children: [
    TextSpan(
      text: "蓝色的文字",
      style: TextStyle(color: Colors.blue),
    ),
    TextSpan(
      text: "我是红色的",
      style: TextStyle(color: Colors.red),
    ),
    TextSpan(
      text: "我的字大一点",
      style: TextStyle(color: Colors.yellow, fontSize: 30),
    ),
  ]),
  style: TextStyle(fontSize: 4),
  textAlign: TextAlign.left,
)

widget_text.png

Button

• FlatButton--扁平的Button
• RaisedButton--凸起的，有阴影，点击有浮动效果
• OutlineButton--有边框的按钮

• IconButton--图标按钮，不能加文字

  
  
  widget_button_0.png

自定义Button

常用属性有：

highlightColor: Colors.green,//按钮按下的背景颜色
splashColor: Colors.blue,//水波纹颜色
color: Colors.red,//背景颜色
disabledColor: Colors.black12,////按钮禁用的颜色
shape:ShapeBorder//形状

ShapeBorder主要有以下子类：

• RoundedRectangleBorder 圆角形
• BeveledRectangleBorder 尖括号形状
• CircleBorder 直接圆形
• ContinuousRectangleBorder 矩形
• StadiumBorder 操场400米跑道形状
• UnderlineInputBorder 下划线

widget_button_custome.png

Image

文件图片，网络图片，资源图片，内存中的图片

两种写法：

Image(
  image: NetworkImage(image_0),
  width: 100,
),
Image.network(image_0, width: 100, height: 100),

属性：

this.width, //图片的宽
this.height, //图片高度
this.color, //图片的混合色值
this.colorBlendMode, //混合模式
this.fit,//缩放模式
this.alignment = Alignment.center, //对齐方式
this.repeat = ImageRepeat.noRepeat, //重复方式

缩放模式 fit，直接看图对比

widget-image-fit.png

TextField 和 TextFormField 输入框和表单提交校验

TextField(
    //控制器，可以获取文本内容，清空文本框等操作_textEditingController=TextEditingController()
  controller: _textEditingController,
  //文本样式
  style: TextStyle(
    fontSize: 40,
    color: Colors.red,
  ),
  maxLines:10,//最大行数
  minLines: 1,//最小行数--当字数超过一行的时候会自动增加高度变成两行
  onChanged: (value) => {
      //文字变化回调
    setState(() {
      textFieldStr = value;
    })
  },
),

TextField的属性很多，常用的看注释

TextFormField(
  //当点击空白处的时候可以使用_focusNodePhone.unfocus()失去焦点进行影藏键盘
  focusNode: _focusNodePhone,
  autofocus: true,
  //控制器
  controller: _phoneController,
  //输入框装饰器
  decoration: InputDecoration(
    labelText: "手机号",
    hintText: "请输入手机号",
    prefixIcon: Icon(
      Icons.phone_android,
    ),
  ),
  //表单提交，规则校验
  validator: (value) {
    if (value.startsWith("1") && value.length == 11) {
      return null;
    } else {
      return "手机号不对";
    }
  },
),

widget_textfield.png

开关：Switch

Switch(
  value: isOpen,
  onChanged: (value) {
    setState(() {
      isOpen = value;
    });
  },

复选框：Checkbox

Checkbox(
  value: isOpen,
  onChanged: (value) {
    setState(() {
      isOpen = value;
    });
  },

进度条 ProgressIndicator

CircularProgressIndicator  -- 圆形
LinearProgressIndicator    -- 线性
RefreshProgressIndicator   -- 类似于下拉刷新的圆形进度条

widget_progress.png