Flutter开发01-基本组件

发表于 | 分类于
Flutter开发

启程

用Flutter开发主要的优势就在于UI层的构建，说到界面设计给出的尺寸的单位和开发的单位不一致，那么我们就要获取设备的宽度

1
2
3
final size = MediaQuery.of(context).size;
final width = size.width;
final height = size.height;

获取后在蓝湖中指定宽度后，就可以直接用蓝湖显示的宽高来写页面了。

查看Flutter各组件的网站：https://ui.flutterdart.cn/

TextField

基本示例

1
2
3
4
5
6
7
8
9
10
TextField(
  decoration: const InputDecoration(
    hintText: '请输入用户名',
    contentPadding: const EdgeInsets.only(left: 10),
  ),
  controller: new TextEditingController(text: this.username),
  onChanged: (val) {
    this.username = val;
  },
),

Button

Flutter中给我们预先定义好了一些按钮控件给我们用，常用的按钮如下

  • RaisedButton ：凸起的按钮，其实就是Android中的Material Design风格的Button ，继承自MaterialButton
  • FlatButton ：扁平化的按钮，继承自MaterialButton
  • OutlineButton ：带边框的按钮，继承自MaterialButton
  • IconButton ：图标按钮,继承自StatelessWidget

GestureDetector

非Button组件添加点击事件

1
2
3
4
5
6
7
8
9
10
11
12
13
GestureDetector(
    child: Container(
        height: 40,
        width: 40,
        alignment: Alignment.center,
        child: Container(
            width: 27,
            height: 27,
            child: Image.asset("images/home/home_his.png"),
        ),
    ),
    onTapUp: (_) {},
)