Flutter widget库介绍Flutter

/ / 2015-10-25
Flutter widget库介绍 Flutter提供了一套丰富、强大的基础widget,在基础widget库之上Flutter又提供了一套Material风格(Android默认的视觉风格)和一套Cupertino风格(iOS视觉风格)的widget库。要使用基础widget库,需要先导入: import 'package:flutter/...

Flutter widget库介绍

Flutter提供了一套丰富、强大的基础widget,在基础widget库之上Flutter又提供了一套Material风格(Android默认的视觉风格)和一套Cupertino风格(iOS视觉风格)的widget库。要使用基础widget库,需要先导入:

import 'package:flutter/widgets.dart'; 

下面我们介绍一下常用的widget。

基础widget

  • Text:该 widget 可让您创建一个带格式的文本。
  • Row、 Column: 这些具有弹性空间的布局类Widget可让您在水平(Row)和垂直(Column)方向上创建灵活的布局。其设计是基于web开发中的Flexbox布局模型。
  • Stack: 取代线性布局 (译者语:和Android中的FrameLayout相似),Stack允许子 widget 堆叠, 你可以使用 Positioned 来定位他们相对于Stack的上下左右四条边的位置。Stacks是基于Web开发中的绝对定位(absolute positioning )布局模型设计的。
  • Container: Container 可让您创建矩形视觉元素。container 可以装饰一个BoxDecoration, 如 background、一个边框、或者一个阴影。 Container 也可以具有边距(margins)、填充(padding)和应用于其大小的约束(constraints)。另外, Container可以使用矩阵在三维空间中对其进行变换。

Material widget

Flutter提供了一套丰富的Material widget,可帮助您构建遵循Material Design的应用程序。Material应用程序以MaterialApp widget开始, 该widget在应用程序的根部创建了一些有用的widget,比如一个Theme,它配置了应用的主题。 是否使用MaterialApp完全是可选的,但是使用它是一个很好的做法。在之前的示例中,我们已经使用过多个Material widget了,如:ScaffoldAppBarFlatButton等。要使用Material widget,需要先引入它:

import 'package:flutter/material.dart'; 

Cupertino widget

Flutter也提供了一套丰富的Cupertino风格的widget,尽管目前还没有Material widget那么丰富,但也在不断的完善中。值得一提的是在Material widget库中,有一些widget可以根据实际运行平台来切换表现风格,比如MaterialPageRoute,在路由切换时,如果是Android系统,它将会使用Android系统默认的页面切换动画(从底向上),如果是iOS系统时,它会使用iOS系统默认的页面切换动画(从右向左)。由于在前面的示例中还没有Cupertino widget的示例,我们实现一个简单的Cupertino页面:

//导入cupertino widget库 import 'package:flutter/cupertino.dart'; class CupertinoTestRoute extends StatelessWidget {  Widget build(BuildContext context) { return CupertinoPageScaffold( navigationBar: CupertinoNavigationBar( middle: Text("Cupertino Demo"), ), child: Center( child: CupertinoButton( color: CupertinoColors.activeBlue, child: Text("Press"), onPressed: () {} ), ), ); } } 

下面是在iPhoneX上页面效果截图:

image-20180824181958838

总结

Flutter提供了丰富的widget,在实际的开发中你可以随意使用它们,不要怕引入过多widget库会让你的应用安装包变大,这不是web开发,dart在编译时只会编译你使用了的代码。由于Material和Cupertino都是在基础widget库之上的,所以如果你的应用中引入了这两者之一,则不需要再引入flutter/widgets.dart了,因为它们内部已经引入过了。

1