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,
          ),
        )
      ],
    );
  }
}
複製代碼