Flutter的学习4|“朝闻道”知识分享大赛

[简单凯凯]

这是我参加朝闻道知识分享大赛的第115篇文章

更多组件

1. 固定宽高比组件

• AspectRatio 组件

  • aspectRatio 定义盒子比例

  • 根据父级盒子

  AspectRatio(
      aspectRatio: 16.0 / 9.0,
      child: Container(
          color: Color.fromRGBO(3, 54, 255, 1.0),
      ),
  );

2. 层叠堆放组件

• Stack 组件

  • alignment对齐属性

  • 定义多个子组件

    • 定义第一个最底层的组件

    • 通过Positioned组件来定义对位组件

      • 定义方位属性

```
Stack(
  alignment: Alignment.topLeft,
  children: <Widget>[
    Container( // 第一个子组件在最下面
        decoration: BoxDecoration(
          color: Color.fromRGBO(3, 54, 255, 1.0),
          borderRadius: BorderRadius.circular(8.0),
        ),
    ),
    Positioned( //做层叠定位的组件
      right: 20.0,
      top: 20.0,
      child: Icon(Icons.ac_unit, color: Colors.white, size: 16.0),
    ),
    Positioned(
      right: 40.0,
      top: 60.0,
      child: Icon(Icons.ac_unit, color: Colors.white, size: 18.0),
    ),
  ],
);
```

3. 固定尺寸组件

• SizedBox 组件

  • 固定宽度

  • 固定高度

  SizedBox(
    height: 32.0,
    width: 100.0
  ),

4. 水平分割线组件

• Divider 组件

  • 颜色设置

  • 固定高度

  Divider(
      height: 1.0,
  )

5. 列表行组件

• ListTile 组件

  • 行前图标

  • 行尾图标

  • 标题

  • 副标题

  • 点按动作

  ListTile(
      title: Text('我的账户'),
      subtitle: Text('data'),
      leading: Icon(Icons.account_box),
      trailing: Icon(Icons.account_box),
      onTap: (){
        print('按下了我的账户');
      },
    ),

6.Tag标签组件

• Chip 组件

  • 文字 label

  • 背景颜色 backgroundColor

  • 行前图标 avatar

  • 删除按钮 onDeleted

  Chip(
      label: Text('Tag'),
      backgroundColor: Colors.orange,
       : CircleAvatar(
        backgroundColor: Colors.grey,
        child: Text('e'),
      ),
      onDeleted: () {},
      deleteIcon: Icon(Icons.delete),
    ),

 

表单输入

1. 文本输入

* 使用文本框组件 `TextField()`

 2. 文本输入样式

* decoration 装饰属性

  * Icon 图标

  * labelText 提示

  * hintText 预置提示

  * border 边框

  * filled 背景颜色

  ```
  TextField(
      decoration: InputDecoration(
        icon: Icon(Icons.subject),
        labelText: '姓名',
        hintText: '请输入',
        border: InputBorder.none,
        // border: OutlineInputBorder(),
        filled: true,
      ),
    );
  ```

3. 输入监听

* onChanged 改变

* onSubmitted 确认按钮

```
   onChanged: (value) {
     debugPrint('input: $value');
   },
   onSubmitted: (value) {
    debugPrint('submit: $value');
   },
```

* 密码框 `obscureText`

4.状态组件

* StatefulWidget 添加一个有状态的组件

  * 可以有数据改变的组件

  ```
  class Form extends StatefulWidget {
    @override
    _FormState createState() => _FormState(); //为组件建立状态管理
  }
  
  class _FormState extends State<Form> { //创建有状态的组件
    @override
    Widget build(BuildContext context) {
      return Container(
        
      );
    }
  }
  ```