Flutter入门 - 基础Widget

Text 

Text.rich 富文本 

TextSpan

DEMO

class TextDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //富文本 
    return Text.rich(
      TextSpan(
        children: [
          TextSpan(
              text: "《定风波》",
              style: TextStyle(
                  fontSize: 25,
                  fontWeight: FontWeight.bold,
                  color: Colors.black)),
          TextSpan(
              text: "苏轼",
              style: TextStyle(fontSize: 18, color: Colors.redAccent)),
          TextSpan(text: "\n莫听穿林打叶声，何妨吟啸且徐行。\n竹杖芒鞋轻胜马，谁怕？一蓑烟雨任生平。")
        ],
      ),
      style: TextStyle(fontSize: 20, color: Colors.pink),
      textAlign: TextAlign.center,
    );
  }
}
复制代码

Button 

Image 

网络图片 

Image.network("srcurl", width: 200, height: 100);
//或者下面
Image(image: NetworkImage("url"), width: 200, height: 100);
复制代码

NetworkImage 是能够从网络下载图片的类，它自己是异步的。Image.network是对NetworkImage的封装

本地图片

1. 首先建立 images 文件夹在根目录下
2. 打开pubspec.yaml 的 assets开关
3. 写成 images/便可

Image.asset("images/baidu.png")
复制代码

Icon 

TextFiled

焦点对象 FocusNode

FocusNode _nameFocus = FocusNode();
复制代码

• 当前是不是响应者 foucs.hasFocus
• 添加响应者addListener

TextEditingController

每一个 TextField 能够与一个 controller 进行绑定 经过 controller.text 能够拿到 textField 的 value

final _usernameController = TextEditingController();
复制代码

监听

焦点对象和 controller 均可以添加监听

@override
  void initState() {
    super.initState();
    
    _usernameController.addListener(() {
      print("name: ${_usernameController.text}");
    });
    
    _nameFocus.addListener(() {
      if (!_nameFocus.hasFocus) {
        print("name - 失去焦点");
      } else if (_nameFocus.hasFocus) {
        print("name - 获取焦点");
      }
    });
  }
复制代码

DEMO

TextField(
    focusNode: _nameFocus,
    controller: _usernameController,
    decoration: InputDecoration(
        icon: Icon(Icons.people),
        labelText: "username",
            hintText: "请输入用户名", //placeholder
         ),
        // 输入改变 == textFieldDidChanged
        onChanged: (value) {
          print("onchanged:$value");
        },
        // 提交时回调
        onSubmitted: (value) {
          print("onsubmit:$value");
        },
    );
复制代码

Form - TextFormField 表单提交

Form

• 通常用于嵌套 column<TextFormField> 进行表单提交

• 若是咱们调用Form的State对象的save方法，就会调用Form中放入的TextFormField的onSave回调：

• 可是，咱们有没有办法能够在点击按钮时，拿到 Form对象 来调用它的 save 方法呢？

知识点：在Flutter如何能够获取一个经过一个引用获取一个StatefulWidget的State对象呢？

答案：经过绑定一个GlobalKey便可。Form 表单绑定下面的registerKey

final registerKey = GlobalKey<FormState>();
复制代码

下面便可调用 TextFormField 的 onSave 回调

registerKey.currentState.save();
复制代码

TextFormField

相对于 TextField 多了 onSaved 回调方法

TextFormField( 
    decoration: InputDecoration(
        icon: Icon(Icons.people), 
        labelText: "用户名或者手机号", 
        hintText: "username"),
        onSaved: (value) { 
            this.username = value; 
    },
复制代码

DEMO

class TextFormFiledDemo extends StatefulWidget {
  @override
  _TextFormFiledDemoState createState() => _TextFormFiledDemoState();
}

class _TextFormFiledDemoState extends State<TextFormFiledDemo> {
  var username = "";
  var password = "";
  // 注册绑定 key
  final registerKey = GlobalKey<FormState>();
  void register() {
    registerKey.currentState.save();
    print("name: $username, pwd: $password");
  }

  @override
  Widget build(BuildContext context) {
    return Form(
        //绑定的 key，能够经过这个 key 拿到 Form 对象
        key: registerKey,
        child: Column(
          children: [
            TextFormField(
              decoration: InputDecoration(
                  icon: Icon(Icons.people),
                  labelText: "用户名或者手机号",
                  hintText: "username"),
              onSaved: (value) {
                this.username = value;
              },
            ),
            TextFormField(
              obscureText: true, //安全
              decoration: InputDecoration(
                  icon: Icon(Icons.lock),
                  labelText: "密码",
                  hintText: "password"),
              // 相对于 TextField 多了 `onSaved` 回调方法
              onSaved: (value) {
                this.password = value;
              },
            ),
            SizedBox(
              height: 10,
            ),
            Container(
              child: ElevatedButton(
                child: Text("注册"),
                onPressed: register,
              ),
            )
          ],
        ));
  }
}
复制代码

圆角

ClipRRect

和 iOS cornerRadius 用法同样

ClipOval

对于原图是正方形比较友好，能正好切一个圆形。因此没有设置圆角大小参数

class RoundDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ClipRRect(
          borderRadius: BorderRadius.circular(50),
          child: Image.network(
            // "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg",//正方形
            "https://pic1.zhimg.com/v2-bc0c14278ec0e2c604f9307a5323815b_1440w.jpg?source=172ae18b",
            width: 200,
            height: 100,
          ),
        ),
        ClipOval(
          child: Image.network(
            "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg",
            width: 100,
            height: 100,
          ),
        )
      ],
    );
  }
}
复制代码