2.Flutter-初识Widget

发表于 | 分类于 | | 阅读数

Widget(小部件/组件) 在flutter的世界里万物皆为Widget，可以理解成乐高玩具，再复杂的东西都是由一个个的小部件组成的。
说一千道一万，不如代码来得快。下面直接展示一个最简单的Widget

1
2
3
4
5
6
7
8
9
10
11
12
13
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
    );
  }
}

第一句main 作为程序的入口，等于C里面的main和iOS的didFinish
使用runApp()来设置启动的Widget，其中=>是简写的方式，在flutter中如果函数只执行一句代码，可以直接用这个箭头代替，和下面这样一个意思

1
2
3
void main() {
  runApp(MyApp());
}

接着新建了个类叫MyApp继承自StatelessWidget这个无状态控制器，后续章节我会详细介绍有状态与无状态的区别。

在类里面重写build构建方法，并返回一个容器类Widget–Container，类似于前端的div
设置了背景色为蓝色，来看看效果。

这个Demo中MyApp是我自己创建的Widget类，然后里面又创建了一个系统的ContainerWidget，并设置去属性Color为蓝色，这就是一个很简单的Widget

下面来演示一些系统的Widget类，创建出APP流行的页面结构
直接修改刚才的MyApp类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "FlutterDemo",
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter"),
        ),
        body: Container(),
      )
    );
  }
}

来看看效果

是不是突然熟悉了起来，哈哈。
首先在build里创建了一个MaterialApp，给title和home属性赋值(其中title属性只对Android有效)
而Scaffold则是脚手架的意思，负责构建一个具有顶部导航栏AppBar的界面
这里值得一提的是title属性也是一个Widget，不能直接使用字符串，要用Text包装一下
在body里面我们就可以搭建具体的页面布局咯

下期介绍Flutter布局