Flutter跨平台移动端开发丨Text、Button、Image、Switch、Checkbox、TextField

目录

1. Text Widget（文本）
2. Button Widget（按钮）
3. Image Widget（图片）
4. Switch and Checkbox（开关按钮及复选框）
5. TextField Widget（输入框）

---

Text Widget（文本）

文字类信息展示都是使用 Text Widget 来承载

  const Text(this.data, {
    Key key,
    this.style,
    this.strutStyle,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
  }) : assert(data != null),
       textSpan = null,
       super(key: key);

• key：唯一标识ID
• textAlign：居中显示文字
• maxLines、overflow：控制文字显示样式
• textScaleFactor：控制字体大小
• TextStyle：添加样式
• TextSpan：文字片段设置
• DefaultTextStyle：子节点继承父节点样式

/**
 * @des Text Widget
 * @author liyongli 20190411
 * */
class SomeWidget extends StatefulWidget{

  @override
  State<StatefulWidget> createState() =>  new _SomeState();

}

/**
 * Text Widget 属性及样式控制模块
 * */
class _SomeState extends State<SomeWidget>{

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("Text Widget"),
        ),
        body: new Column(
          children: <Widget>[

            // 居中显示文字 textAlign
            new Padding(
              padding: new EdgeInsets.all(20),
              child: new Text("1. " + "居中显示 "*10, textAlign: TextAlign.center,),
            ),

            // 控制文字显示样式 maxLines overflow
            new Padding(
              padding: new EdgeInsets.all(20),
              child: new Text("2. " + "控制行数"*20, maxLines: 2,overflow: TextOverflow.ellipsis,),
            ),

            // 控制字体大小 textScaleFactor
            new Padding(
              padding: new EdgeInsets.all(20),
              child: new Text("3. " + "字体大小"*10, textScaleFactor:2.0, textAlign: TextAlign.right, maxLines: 2, overflow: TextOverflow.ellipsis,),
            ),

            // 添加样式 TextStyle
            new Padding(
              padding: new EdgeInsets.all(20),
              child: new Text("4. " + "添加样式"*10, textScaleFactor:2.0, textAlign: TextAlign.right, maxLines: 2, overflow: TextOverflow.ellipsis,style: new TextStyle(
                color: Color(0xFFd72722),
                fontSize: 11,
                fontWeight: FontWeight.w900,
                background: new Paint()..color = Color(0xff999999),
                decoration: TextDecoration.lineThrough,
                decorationColor: Colors.amberAccent,
                decorationStyle: TextDecorationStyle.dashed
              ),),
            ),

            // 文字片段设置 TextSpan
            new Padding(
              padding: new EdgeInsets.all(20),
              child: Text.rich(TextSpan(
                children: [
                  TextSpan(
                    text: "5. " + "五颜"*5,
                    style: TextStyle(
                      color: Color(0xffd72722),
                    )
                  ),
                  TextSpan(
                    text: "和"*5,
                    style: TextStyle(
                      color: Color(0xff333333)
                    )
                  ),
                  TextSpan(
                    text:"六色"*5,
                    style: TextStyle(
                    color: Color(0xff999999)
                    )
                  )
                ]
              ))
            ),

            // 继承父节点样式 DefaultTextStyle
            new Padding(
              padding: new EdgeInsets.all(20),
              child: DefaultTextStyle(

                  // 设置默认样式
                  style: TextStyle(
                    color: Color(0xffd72722),
                    fontWeight: FontWeight.w900,
                  ),

                  // 继承父节点样式
                  child: Column(
                    children: <Widget>[
                      new Text("6. 继承父节点样式"),
                      new Text("父节点啥样我啥样"),
                      new Text("父节点啥样我啥样"),
                      new Text("父节点啥样我不管，变异了", style: TextStyle(
                        inherit: false,
                        color: Color(0xff333333)
                      ),),
                    ],
                  ))
            ),
          ],
        ),
      ),
    );
  }
}

---

Button Widget（按钮）

Material 库中的按钮点击时默认带有“水波动画”，点击事件监听通过 onPressed 属性设置，若不设置 onPressed 则按钮处于禁用状态，无点击动效也不响应点击事件

  const MaterialButton({
    Key key,
    @required this.onPressed,
    this.onHighlightChanged,
    this.textTheme,
    this.textColor,
    this.disabledTextColor,
    this.color,
    this.disabledColor,
    this.highlightColor,
    this.splashColor,
    this.colorBrightness,
    this.elevation,
    this.highlightElevation,
    this.disabledElevation,
    this.padding,
    this.shape,
    this.clipBehavior = Clip.none,
    this.materialTapTargetSize,
    this.animationDuration,
    this.minWidth,
    this.height,
    this.child,
  }) : super(key: key);

• RaisedButton：漂浮按钮，默认带有阴影和灰色背景，点击时阴影会变大
• FlatButton：扁平按钮，
• OutlineButton：带边框按钮
• IconButton：带图标按钮
• Custom FlatButton：自定义扁平按钮
• Custom RaisedButton：自定义漂浮按钮

/**
 * @des Button Widget
 * @author liyongli 20190411
 * */
class ButtonWidget extends StatefulWidget{

  @override
  State<StatefulWidget> createState() => new _ButtonState();

}

/**
 * Button Widget 属性及样式控制模块
 * */
class _ButtonState extends State<ButtonWidget>{
  
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(

        // 设置导航栏
        appBar: new AppBar(
          title: Text("Button Widget"),
        ),

        // 设置主体
        body: new Center(
          child: new Column(
            children: <Widget>[

              // 漂浮按钮
              new Padding(
                 padding: EdgeInsets.all(15.0),
                 child: new RaisedButton(onPressed: _BtnClick, child: Text("RaisedButton / 漂浮按钮"),),
              ),

              // 扁平按钮
              new Padding(
                padding: EdgeInsets.all(15.0),
                child:  new FlatButton(onPressed: _BtnClick, child: Text("FlatButton / 扁平按钮")),
              ),

              // 带边框按钮
              new Padding(
                padding: EdgeInsets.all(15.0),
                child: new OutlineButton(onPressed: _BtnClick, child: Text("OutlineButton / 带边框按钮"),),
              ),

              // 带图标按钮
              new Padding(
                padding: EdgeInsets.all(15.0),
                child: new IconButton(icon: Icon(Icons.thumb_up), onPressed: _BtnClick,),
              ),

              // 自定义按钮
              new Padding(
                padding: EdgeInsets.all(15.0),
                child: new FlatButton(
                  child: Text("自定义 FlatButton"),
                  onPressed: _BtnClick,
                  color: Colors.blue ,
                  textColor: Colors.white,
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
                ),
              ),

              // 自定义按钮
              new Padding(
                padding: EdgeInsets.all(15.0),
                child: new RaisedButton(
                  child: Text("自定义 RaisedButton"),
                  onPressed: _BtnClick,
                  color: Colors.deepOrange ,
                  textColor: Colors.white,
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
                ),
              ),

            ],
          ),
        )
      ),
    );
  }

  // 按钮点击监听
  void _BtnClick(){
    print("点击啦，啦啦啦");
  }

}

---

Image Widget（图片）

Image 的数据源可以是asset、文件、内存或网络图片

  const Image({
    Key key,
    @required this.image,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.filterQuality = FilterQuality.low,
  }) : assert(image != null),
       assert(alignment != null),
       assert(repeat != null),
       assert(filterQuality != null),
       assert(matchTextDirection != null),
       super(key: key);

• ImageProvider：抽象类，定义了图片数据获取接口 load()
• AssetImage：从 Asset 中加载图片的 ImageProvide
• NetworkImage：从网络记载图片的 ImageProvider

AssetImage（加载本地图片）

1. 工程根目录下创建文件夹 images 存放图片文件
2. 在 pubspec.yaml 文件中 flutter 部分添加图片注册信息

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
  assets:
  - images/image_widget_test.jpg

3. 在 widget 中设置加载本地图片

Image.asset("images/image_widget_test.jpg",width: 144,height: 200, fit: BoxFit.fitHeight,),

NetworkImage（加载网络图片）

加载网络图片有两种方式可选

• NetworkImage

Image(image: NetworkImage("https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3120670470,3551547131&fm=58&bpow=3071&bpoh=4429"),width: 144,height: 200, fit: BoxFit.fitHeight,),

• Image.network

Image.network("https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3120670470,3551547131&fm=58&bpow=3071&bpoh=4429", width: 144,height: 200, fit: BoxFit.fitHeight,),

AssetImage - NetworkImage - Image.network

Image属性控制

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

---

Switch and Checkbox（开关按钮及复选框）

Switch 和 Checkbox 都继承 StatelessWidget ，自身也就不会保留状态，状态由父widget管理

  const Switch({
    Key key,
    @required this.value,
    @required this.onChanged,
    this.activeColor,
    this.activeTrackColor,
    this.inactiveThumbColor,
    this.inactiveTrackColor,
    this.activeThumbImage,
    this.inactiveThumbImage,
    this.materialTapTargetSize,
    this.dragStartBehavior = DragStartBehavior.down,
  }) : _switchType = _SwitchType.material,
       assert(dragStartBehavior != null),
       super(key: key);

/**
 * @des SwitchWidget and CheckboxWidget
 * @author liyongli 20190417
 * */
class SwitchCheckBoxWidget extends StatefulWidget{

  @override
  State<StatefulWidget> createState() =>  new _SwitchCheckBoxState();

}

class _SwitchCheckBoxState extends State<SwitchCheckBoxWidget>{

  // 开关状态
  bool _switchSelected = true;
  // 复选框状态
  bool _checkboxSelected = true;

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        
        // 设置导航栏
        appBar: new AppBar(
          title: Text("Switch and CheckBox"),
        ),

        body: Center(
          child: new Column(
            children: <Widget>[

              // 开关组件
              new Switch(
                  value: _switchSelected,
                  onChanged: (value){
                    setState(() {
                      // 更新开关状态
                      _switchSelected = value;
                    });
                  }),

              // 复选框租金
              new Checkbox(
                  value: _checkboxSelected,
                  onChanged: (val){
                    setState(() {
                      // 更新选中状态
                      _checkboxSelected = val;
                    });
                  })
            ],
          )
        ),
      ),
    );
  }
}

---

TextField Widget（输入框）

  const TextField({
    Key key,
    this.controller,
    this.focusNode,
    this.decoration = const InputDecoration(),
    TextInputType keyboardType,
    this.textInputAction,
    this.textCapitalization = TextCapitalization.none,
    this.style,
    this.textAlign = TextAlign.start,
    this.textDirection,
    this.autofocus = false,
    this.obscureText = false,
    this.autocorrect = true,
    this.maxLines = 1,
    this.maxLength,
    this.maxLengthEnforced = true,
    this.onChanged,
    this.onEditingComplete,
    this.onSubmitted,
    this.inputFormatters,
    this.enabled,
    this.cursorWidth = 2.0,
    this.cursorRadius,
    this.cursorColor,
    this.keyboardAppearance,
    this.scrollPadding = const EdgeInsets.all(20.0),
    this.dragStartBehavior = DragStartBehavior.down,
    this.enableInteractiveSelection,
    this.onTap,
    this.buildCounter,
  }) : assert(textAlign != null),
       assert(autofocus != null),
       assert(obscureText != null),
       assert(autocorrect != null),
       assert(maxLengthEnforced != null),
       assert(scrollPadding != null),
       assert(dragStartBehavior != null),
       assert(maxLines == null || maxLines > 0),
       assert(maxLength == null || maxLength == TextField.noMaxLength || maxLength > 0),
       keyboardType = keyboardType ?? (maxLines == 1 ? TextInputType.text : TextInputType.multiline),
       super(key: key);

• 输入框控制器 TextEditingController
• 输入框事件监听 onChanged
• 输入框样式修改 Theme

/**
 * @des TextField Widget
 * @author liyongli 20190419
 * */
class TextFieldWidget extends StatefulWidget{

  @override
  State<StatefulWidget> createState() => new _TextFieldState();

}

/**
 * TextField 属性及样式控制模块
 * */
class _TextFieldState extends State<TextFieldWidget>{

  // 账号输入框控制器
  TextEditingController _accountController = new TextEditingController();
  // 密码输入框控制器
  TextEditingController _passwordController = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(

        // 导航栏样式
        appBar: new AppBar(
          title: Text("TextFieldWidget"),
        ),

        // 主体部分
        body: new Column(
          children: <Widget>[

            // 修改输入框默认样式
            Theme(
              data: Theme.of(context).copyWith(
                  hintColor: Color(0xff000000), // 修改下划线颜色
                  inputDecorationTheme: InputDecorationTheme(
                      labelStyle: TextStyle(color: Color(0xffd72722)), // 修改lable文字颜色
                      hintStyle: TextStyle(fontSize: 12.0,color: Color(0xff000000)) // 修改输入框提示文字颜色
                  )
              ),

              // 账号输入框
              child: new TextField(
                // 输入框控制器设置
                controller: _accountController,
                // 输入框文字变化监听
                onChanged: _changeLisener,
                // 是否获取焦点
                autofocus: true,
                // 样式控制
                decoration: new InputDecoration(
                  labelText: "账号",
                  hintText: "请输入账号",
                  prefixIcon: Icon(Icons.person),
                  border: InputBorder.none //隐藏下划线
                ),
              ),
            ),

            // 密码输入框
            new TextField(
              // 输入框控制器设置
              controller: _passwordController,
              // 输入框文字变化监听
              onChanged: _changeLisener,
              // 是否获取焦点
              autofocus: false,
              // 样式控制
              decoration: new InputDecoration(
                labelText: "密码",
                hintText: "请输入密码",
                prefixIcon: Icon(Icons.lock),
//                border: InputBorder.none
              ),
            ),

            new OutlineButton(
              onPressed: _submitLisener,
              child: Text("提 交"),
            )
          ],
        ),
      ),

    );
  }

  // 输入框文字改变监听
  void _changeLisener(str){
    print(str);
  }

  // 提交按钮监听
  void _submitLisener(){
    print(_accountController.text);
    print(_passwordController.text);
  }

  // 使用控制器初始化两个输入框值
  void _initAccountData(){
    _accountController.text = "123456";
    _passwordController.text = "654321";
  }

}

默认样式

通过 Theme 修改输入框 lable 文字颜色、提示文字颜色后（下划线已隐藏）

---

本篇到此完结，更多 Flutter 跨平台移动端开发 原创内容持续更新中~

期待您 关注 / 点赞 / 收藏 向着 大前端工程师 晋级！

---