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

2021-03-11 本文已影响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

1. 文本Widget

1.1. 普通文本展示

1.2. 富文本展示

2. 按钮Widget

2.1. 常规

2.1.1. 设置按钮的大小

2.2. 自定义按钮

3. 图片

3.1 加载网络图片

3.2. 加载本地图片

3.2.1. 占位图

3.3. icon

4. TextField

4.1. 基本属性

WechatIMG941.jpeg

4.2. 监听输入框

4.2.1 监听输入

4.2.2 监听输入完成

4.3. 获取TextField中的内容

猜你喜欢

热点阅读