中秋活动:订阅年付会员送 6 个月,重订、续订送 12 个月。订阅 →

Flutter 移动应用开发 #2:自定义小部件(Widget)

Flutter 里面到处都是小部件(Widget),你要显示一行文字,用一个 Text 小部件。需要展示图像,需要用到 Image 小部件。需要一个能设置背景、尺寸、边距的容器,可以使用 Container 小部件。要添加一组并排显示的内容,要用的是 Row 小部件。需要一组竖排显示的内容,可以使用 Column 小部件。

小部件可以组合到一块儿用,一个小部件是可以是另一个小部件或者另一些小部件的爸爸,另一个小部件又可以有它自己的孩子或孩子们。有些小部件只能有一个孩子(child),比如 Container。还有些小部件可以有多个孩子(children),比如 Row 或者 Column

不同类型的小部件都有各自的功能,它们里面都定义了一些属性还有方法,通过这些东西我们可以配置使用小部件。比如 Container 部件里可以使用 width 设置容器的宽度,或者使用 height 属性设置容器的高度,在它的 child 属性里面需要指定这个 Container 的孩子是谁。注意部件属性的值很多都是 double 类型的,比如你需要一个 100 宽的容器,这个 Containerwidth 应该设置成 80.0,而不是整数 80

我们可以自由地创建自己需要的小部件,在这个自定义的小部件里面,你可以使用 Flutter 提供的现成的小部件,也可以使用你定义的其它的自定义的小部件。一个自定义的小部件就是一个 Class(类),一般这个类会继承 StatelessWidget 或者 StatefulWidget ,这里说的 State 指的就是数据。如果在你的小部件里需要处理修改 State,那你需要创建一个 StatefulWidget 。如果不需要处理修改 State,可以创建一个 StatelessWidget

下面创建了一个叫 App 的小部件,它继承了 StatelessWidget,意思就是在这个小部件里面不需要修改数据:

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return null;
  }
}

StatelessWidget 是个抽象类,它需要让我们在类里面添加一个叫 build 的方法,这个方法返回的东西就是一个 Widget,也就是你的自定义的小部件。

之前我们直接在 runApp 里面用了一个 Center 小部件(在界面上显示 hello),现在可以把这个 Center 放在自定义的 App 小部件里面,让它作为 build 方法返回的东西,然后把 App 交给 runApp。像这样:

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'hello',
        textDirection: TextDirection.ltr,
        style: TextStyle(
          fontSize: 32.0,
          color: Colors.yellow,
        ),
      ),
    );
  }
}

热加载

现在我们的应用就可以使用热加载功能了,试着修改一下 Text 小部件里的文件,保存文件以后,在模拟器上你会立即看到修改之后的效果。

文字看不懂,可以看视频,订阅宁皓网,就能在线学 Flutter 的视频课程了。

组合使用自定义小部件

现在我们创建了一个叫 App 的 Stateless 类型的小部件,它的 build 方法 return 的东西会在屏幕中间显示一个 hello。下面我们可以单独再创建一个叫 Hello 的小部件,然后可以让它作为 App 小部件的 build 方法 return 的东西。小部件可以单独放在一个文件里面,然后在想要使用这个小部件的地方,先导入它,就可以使用这个小部件了。

我们在 lib 下面新建一个 demo 目录,里面创建一个文件叫 hello_demo.dart,文件里面可以定义一个叫 Hello 的小部件,注意文件顶部先要导入 flutter 这个 package 里的 material。

lib/demo/hello_demo.dart

import 'package:flutter/material.dart';

class Hello extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'hello',
        textDirection: TextDirection.ltr,
        style: TextStyle(
          fontSize: 32.0,
          color: Colors.yellow,
        ),
      ),
    );
  }
}

lib/main.dart

import './demo/hello_demo.dart';
class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Hello();
  }
}

我们在 App 这个小部件里面组合使用了另一个自己定义的小部件 Hello,因为这个小部件是在一个单独的文件里定义的,所以使用它的时候需要先导入定义这个小部件的那个文件(hello_demo.dart)。

视频是最容易理解的,订阅宁皓网,在线学 Flutter 的视频课程了。

评论

想问一下皓哥这个动图是用什么软件做的:)

用的还是录视频的软件,Screenflow。



微信好友

用微信扫描二维码,
加我好友。



微信公众号

用微信扫描二维码,
订阅宁皓网公众号。



240746680

用 QQ 扫描二维码,
加入宁皓网 QQ 群。

统计

11228
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点