Flutter03之基础组件

hello

Flutter 从 React 中吸取灵感，通过现代化框架创建出精美的组件。它的核心思想是用 widget 来构建你的 UI 界面。 Widget 描述了在当前的配置和状态下视图所应该呈现的样子。当 widget 的状态改变时，它会重新构建其描述（展示的 UI），框架则会对比前后变化的不同，以确定底层渲染树从一个状态转换到下一个状态所需的最小更改。

基础组件

Flutter中自带了一套强大的基础widgets, 下面列出了一些常用的:

  • Text
  • Icon
  • Image
  • Button
  • FlutterLogo

Text

Text组件用来显示简单的文本。

1
2
// 创建
Text('hello');
属性 说明
textAlign 文字对齐方式, 可设置left, right, center, justify(充满宽度), start(文本首对齐), end(文本尾对齐)
textDirection 文字方向, TextDirection.rtl和TextDirection.ltr
maxLines 最大行数
textScaleFactor 缩放因子, 默认1.0
overflow 配合maxLines使用, clip截断, fade渐变隐藏, ellipsis省略号
style TextStyle对象, 其属性有color、fontFamily、background、fontSize、decoration等
textSpan 配合Text.rich使用, 被包装成RichText, 可实现类似富文本的效果

Icon

Icon在Flutter中是一个图标组件。它可以使用Flutter中自带的图标, 也可以使用我们自己矢量图。系统的图标都是矢量图, 不用担心放大后会失真。

详细的Icons图标可以参考Flutter文档

1
2
3
4
5
6
Icon(
  Icons.search,
  color: Colors.red,
  textDirection: TextDirection.ltr,
  size: 60,
)
Icon使用Iconfont矢量图
  • 首先从Iconfont选中一个图片, 添加到购物车
  • 在购物车中选中该图片点击下载代码,
  • 把下载文件夹中的iconfont.ttf拷贝到Flutter项目我们新建的fonts文件夹中
  • 打开配置文件pubspec.yaml配置字体, asset中的路径要和实际路径一致。
1
2
3
4
fonts:
  - family: iconfont
    fonts:
      - asset: fonts/iconfont.ttf
  • 然后使用该矢量图, 打开下载文件中的demo_index.html, 网页中图片下方的, 其中0xe616就是IconData中使用的数字。fontFamily就是pubspec.yaml中定义的family。
1
2
3
4
5
6
7
8
9
Icon(
  IconData(
    0xe616, 
    fontFamily: 'iconfont', 
    matchTextDirection: true),
  color: Colors.red,
  textDirection: TextDirection.ltr,
  size: 60,
)

Image

Flutter中使用Image组件显示图片, 可以显示本地、内存、网络、文件等图片。

加载本地图片

Flutter 应用程序包含代码和 assets（也为资源）。资源是被打包到应用程序安装包中，可以在运行时访问的一种文件。常见的资源类型包括静态数据（例如 JSON 文件），配置文件，图标和图片（JPEG，WebP，GIF，动画 WebP / GIF，PNG，BMP 和 WBMP）。

指定资源

Flutter 使用 pubspec.yaml 文件，位于项目根目录，来识别应用程序所需的资源。注意每个图片资源都需要添加路径, 如果需要添加一个目录下面的所有资源, 需要在目录名称的结尾加上/(只包含当前目录下的的所有文件。如果想要添加子文件夹中的文件，请为每个目录创建一个条目。)。

1
2
3
4
5
6
flutter:
  assets:
    - assets/my_icon.png
    - assets/background.png
	 - directory/
    - directory/subdirectory/
加载图片
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 默认资源bundle中的图片
Image.asset(
  'images/6s.png',
  width: 100,
  height: 100,
  fit: BoxFit.cover,
)
// 加载文件图片
Image.file(
  File('/Users/xxx/Desktop/Flutter/finished_layout/images/6s.png'),
  width: 100,
  height: 100,
  fit: BoxFit.cover,
)
// 网络图片
Image.network(
  'http://www.baidu.com/img/pad_d697ff81bdcfbf42f5ee02b29ce1592d.png',
  width: 270,
  height: 129,
  fit: BoxFit.cover,
)

Button

Flutter中有很多种按钮, RaisedButton、FlatButton、IconButton、FloatingActionButton、OutlineButton、DropdownButton、PopupMenuButton等

RaisedButton

RaisedButton在点击时会带波纹效果, 并且有阴影, 它可以添加子组件.

1
2
3
4
5
6
7
8
RaisedButton(
  onPressed: () {
    print('RaisedButton');
  },
  color: Colors.blue,
  child: Text('RaisedButton'),
  textColor: Colors.white,
)

FlatButton

FlatButton和RaisedButton使用方法基本一致, 不同的地方在于FlatButton没有阴影。

1
2
3
4
5
6
FlatButton(
  onPressed: () {},
  child: Text('FlatButton'),
  textColor: Colors.white,
  color: Colors.blue,
)

IconButton

IconButton可以添加图标作为按钮, 点击时带有波纹效果。

1
2
3
4
5
6
7
8
9
10
11
IconButton(
  icon: Icon(
    Icons.volume_up,
    size: 44.0,
    color: Colors.blue,
  ),
  iconSize: 44,
  onPressed: () {
    print('音量');
  }
)

OutlineButton

OutlineButton是带边框的按钮, 点击的时候, 边框和背景颜色会呈现高亮状态。

1
2
3
4
5
OutlineButton(
  onPressed: () {},
  textColor: Colors.blue,
  child: Text('OutlineButton'),
)

FloatingActionButton

FloatingActionButton悬浮按钮, 通常悬浮在其他组件上面。

1
2
3
4
5
6
7
8
FloatingActionButton(
  onPressed: () {},
  child: Icon(
    Icons.add, 
    size: 44, 
    color: Colors.white
  ),
)

DropdownButton和PopupMenuButton是下拉选择按钮, 使用方式类似, 当用户点击的时候会提供一组供用户选择的选项列表。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
DropdownButton(
  items: <DropdownMenuItem>[
    DropdownMenuItem(
      child: Text('篮球'),
      value: '篮球',
    ),
    DropdownMenuItem(
      child: Text('足球'),
      value: '足球',
    ),
    DropdownMenuItem(
      child: Text('排球'),
      value: '排球',
    ),
  ],
  onChanged: (value) {
    print(value);
  },
  hint: Text('点我'),
  iconEnabledColor: Colors.white,
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
enum SizeValue { small, middle, big }

PopupMenuButton<SizeValue>(
  onSelected: (value) {},
  icon: Icon(Icons.more_horiz),
  itemBuilder: (context) {
    return <PopupMenuEntry<SizeValue>>[
      const PopupMenuItem(
        child: Text('Small'),
        value: SizeValue.small,
      ),
      const PopupMenuItem(
        child: Text('Middle'),
        value: SizeValue.middle,
      ),
      const PopupMenuItem(
        child: Text('Big'),
        value: SizeValue.big,
      ),
    ];
  },
  offset: Offset(5, 10),
)

FlutterLogo是Flutter的Logo组件。

1
2
3
FlutterLogo(
  size: 88,
)

##

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

iOS、Objective-C、Swift、Java、Flutter