Flutter笔记(三) - Flutter的基础Widget

作者: 南城同學 | 来源:发表于2021-03-11 18:03 被阅读0次

1. 文本Widget

1.1. 普通文本展示

在Flutter中，文本的控制参数分为两类：

控制文本布局的参数：如文本对齐方式 textAlign、文本排版方向 textDirection，文本显示最大行数 maxLines、文本截断规则 overflow 等等，这些都是构造函数中的参数；
控制文本样式的参数：如字体名称 fontFamily、字体大小 fontSize、文本颜色 color、文本阴影 shadows 等等，这些参数被统一封装到了构造函数中的参数 style 中；

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      "Hello Worf flutter \n这是Flutter文本演示第二行\n这是Flutter富文本演示第三行",
      textAlign: TextAlign.center, // 所有内容都居中对齐，只有文字占有的宽度达到屏幕的宽度时，才会起作用
      maxLines: 3,
      overflow: TextOverflow.ellipsis, // 超出部分显示...
//      textScaleFactor: 1.25, 缩放
      style: TextStyle(
        fontSize: 20,
        color: Colors.purple
      ),
    );
  }
}

1.2. 富文本展示

class YZHomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text.rich(
      TextSpan(
        children: [
          TextSpan(text: "Hello Word", style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold, color: Colors.black)),
          TextSpan(text: "flutter", style: TextStyle(fontSize: 18, color: Colors.redAccent)),
          TextSpan(text: "\n这是Flutter富文本演示第二行;\n这是Flutter富文本演示第三行;")
        ],
      ),
      style: TextStyle(fontSize: 20, color: Colors.purple),
      textAlign:TextAlign.center,
    );
  }
}

WechatIMG39.jpeg

2. 按钮Widget

2.1. 常规

class YZHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("基础Widget")
        ),
        body: YZHomeContent(),
        floatingActionButton: FloatingActionButton(
            child: Icon(Icons.add),
            onPressed: () => print("123")
        )，
// floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, //浮动按钮位置
    );
  }
}

---

class YZHomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        FloatingActionButton(
          child: Text("FloatingActionButton"),
          onPressed: () {
            print("FloatingActionButton Click");
          },
        ),
        RaisedButton(
          child: Text("RaisedButton"),
          onPressed: () {
            print("RaisedButton Click");
          },
        ),
        FlatButton(
          child: Text("FlatButton"),
          onPressed: () {
            print("FlatButton Click");
          },
        ),
        OutlineButton(
          child: Text("OutlineButton"),
          onPressed: () {
            print("OutlineButton Click");
          },
        )
      ],
    );
  }
}

button.png

2.1.1. 设置按钮的大小

给button包裹container;

 Container(
            width: double.infinity,
            height: 40,
            child: FlatButton(
              child: Text("登录", style: TextStyle(fontSize: 20, color: Colors.white),),
              color: Colors.blue,
              onPressed: (){

              },
            ),
          ),

2.2. 自定义按钮

默认情况下；button上下有以一定的间距；

//自定义button 图标-文字-背景-圆角
        FlatButton(
            onPressed: (){},
            color: Colors.orange,
           //消除按钮不足48时的上下间距
            materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
           //设置内容包裹文字
            padding: EdgeInsets.all(0),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8)
            ),
            child: Row(

              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(Icons.favorite, color: Colors.red),
                Text("点赞")
              ]  
            )
        )

默认的button不能设置过小,
解决：要修改在外面包裹一下buttonTheme；

 ButtonTheme(
          minWidth: 50,
          height: 50,
          child: FlatButton(
            child: Text("FlatButton"),
            onPressed: () {
              print("FlatButton Click");
            },
          ),
        ),

3. 图片

3.1 加载网络图片

网络图片flutter自动做了缓存，最大1000张，最大100M；

class InternetImage extends StatelessWidget {
  final imageUrl = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa0.att.hudong.com%2F30%2F29%2F01300000201438121627296084016.jpg&refer=http%3A%2F%2Fa0.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617871571&t=7b6d8e2a1b411019395f47a87f6c82b3";

  @override
  Widget build(BuildContext context) {
    return Image(
      //颜色混入
      // color: Colors.green,
      // colorBlendMode: BlendMode.colorDodge,
      image: NetworkImage(imageUrl),
      width: 200,
      height: 200,
      // fit: BoxFit.cover,
      fit: BoxFit.fitWidth,//宽度一定，高度自适应
      // repeat: ImageRepeat.repeatY,
      // alignment: Alignment.bottomCenter,//在当前矩形框内，位于底部中心
      //(-1 , 1)
      //最左上角（-1， -1）
      //最右下角（1， 1）
      // alignment: Alignment(0, -1),
    );
  }
}

3.2. 加载本地图片

在flutter项目中创建一个文件夹，存储图片；

注意：flutter中2倍图、3倍图，是不需要添加@2x/@3x的，但是蓝湖上下载的倍图自带@2x/@3x，可参考博客：https://www.jianshu.com/p/6df4663a7a14
image_flutter

在pubspec.yaml进行配置；

assets:
    - assets/images/

注意2：assets空格敏感；

yaml_assets.png
注意3: 执行以下命令行：flutter packages get;
- 如果Waiting for another flutter command to release the startup lock...
- 执行: Linux killall -9 dart, Windows taskkill /F /IM dart.exe；
- 或：删除 flutter 安装目录下的 bin/cache/lockfile 文件；

使用图片

class YZHomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Image.asset("assets/images/image_01.png",width: 200, height: 150);
  }
}

3.2.1. 占位图

@override
  Widget build(BuildContext context) {
    return FadeInImage(
        placeholder: AssetImage("assets/images/image_01.png"),
        image: NetworkImage(imageUrl)
    );
  }

3.3. icon

 @override
  Widget build(BuildContext context) {
    return Icon(Icons.pets);
  }

4. TextField

4.1. 基本属性

class YZHomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        children: [
          TextField(
            decoration: InputDecoration(
              labelText: "username",
              icon: Icon(Icons.people),
                hintText: "请输入用户名",
                border: OutlineInputBorder(),
              filled: true,
              fillColor: Colors.red[100],
            ),
          ),
        ],
      ),
    );
  }
}

WechatIMG941.jpeg

4.2. 监听输入框

4.2.1 监听输入

onChanged: (value) {             
   print(value);            
},

4.2.2 监听输入完成

onSubmitted: (value) {             
   print(value);            
},

4.3. 获取TextField中的内容

WechatIMG43.jpeg

class _YZHomeContentState extends State<YZHomeContent> {
  final userNameTextFieldController = TextEditingController();
  final passwordTextFieldController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        children: [
          TextField(
            controller: userNameTextFieldController,
            decoration: InputDecoration(
              labelText: "username",
              icon: Icon(Icons.people),
              hintText: "请输入用户名",
              border: OutlineInputBorder(),
              filled: true,
              fillColor: Colors.red[100],
            ),
            onChanged: (value) {
              print(value);
            },
            onSubmitted: (value) {
              print(value);
            },
          ),
          SizedBox(height: 20),
          TextField(
            controller: passwordTextFieldController,
            decoration: InputDecoration(
              labelText: "password",
              icon: Icon(Icons.lock),
              hintText: "请输入密码",
              border: OutlineInputBorder(),
            ),
          ),
          SizedBox(height: 20),
          Container(
            width: double.infinity,
            height: 40,
            child: FlatButton(
              child: Text("登录", style: TextStyle(fontSize: 20, color: Colors.white),),
              color: Colors.blue,
              onPressed: (){

                //获取用户名密码
                final username = userNameTextFieldController.text;
                final password = passwordTextFieldController.text;
                print("账号：$username 密码：$password");
              },
            ),
          ),
        ],
      ),
    );
  }
}

网友评论

本文标题：Flutter笔记(三) - Flutter的基础Widget

本文链接：https://www.haomeiwen.com/subject/aahqqltx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！