Flutter入门 - 1、基础WidgetText Text.rich 富文本 TextSpan DEMO But

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的封装

本地图片

首先创建 images 文件夹在根目录下
打开pubspec.yaml 的 assets开关
写成 images/即可

截屏2021-08-05 下午10.38.59.png

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,
          ),
        )
      ],
    );
  }
}