Flutter 常用 Widget 介绍

前言

笔者最近在看 Flutter Widget of the Week：https://www.youtube.com/watch?v=b_sQ9bMltGU，并落地了代码 FlutterLearningRecord：https://github.com/fluttercndev/FlutterLearningRecord。在本文中，笔者将分享几个 Widget 的使用场景及使用方式。在本文中，笔者会介绍如下Widget：SafeArea、Expanded、Wrap、AnimatedContainer、Opacity、FutureBuilder、在BottomAppBar居中的 FloatingActionButton。

首先给大家展示下目前笔者做的常用 Widget 的效果。

一、常用 Widget Demo 效果

笔者上方的常用 Widget Demo 效果图，展示了SafeArea、Expanded、Wrap、AnimatedContainer、Opacity、FutureBuilder、在底部AppBar居中的 FloationgActionButton的使用场景及使用效果。

下边给大家简单介绍下上边的Widget的使用方式。

二、常用 Widget 使用方式

1

SafeArea

1.1

不带SafeArea 示意图

1.2

带SafeArea 示意图

使用 SafeArea 作为 body 的子 Widget，原来的子 Widget 作为 SafeAreade 的子 Widget；

1.3

SafeArea 示例代码

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          children: <Widget>[
            _randomColorContainer(),
          ],
        ),
      ),
    );
  }

2

Expanded

2.1

左右 Expanded（黄色部分Widget） 分别占剩余空间的2:1

Expanded 会显然同级的其他 Widget 先布局，之后剩余的空间，Expanded 才会去占用。

当有多个Expanded时，Expanded的 flex 参数，用于指定要占空白的空间的比例。

2.2

Expaned 示例代码

Row _expandedRow3() {
    return Row(
      children: <Widget>[
        Text(
          '3.LeftText',
          style: TextStyle(fontSize: 32.0, backgroundColor: Colors.greenAccent),
        ),
        Expanded(
            flex: 2,
            child: Container(
              height: 20.0,
              color: Colors.yellow,
            )),
        Container(
          color: Colors.blue,
          width: 100.0,
          // width: 10.0,
          height: 50.0,
          child: Text(
            'C',
            style:
                TextStyle(fontSize: 32.0, backgroundColor: Colors.greenAccent),
          ),
        ),
        Expanded(
            flex: 1,
            child: Container(
              height: 20.0,
              color: Colors.yellow,
            )),
        Container(
          width: 100.0,
          height: 50.0,
          child: Text(
            'Right',
            style:
                TextStyle(fontSize: 32.0, backgroundColor: Colors.greenAccent),
          ),
        ),
      ],
    );
  }

3

Wrap

3.1

Wrap Demo 示意图

1.2

Wrap 示例代码

Wrap horizontalWrap(int index) {
    return Wrap(
      // 默认主轴为水平方向
      // direction: Axis.horizontal,
      children: <Widget>[
        horizontalRandomColorWrapContainer(index++),
        horizontalRandomColorWrapContainer(index++),
        horizontalRandomColorWrapContainer(index++),
        horizontalRandomColorWrapContainer(index++),
      ],
    );
  }

4

AnimatedContainer

4.1

AnimatedContainer 执行动画前示意图

4.2

AnimatedContainer 执行动画后示意图 

AnimatedContainer 执行前后，改变了 Widget 的背景色、宽度、高度、子 Widget 的对齐方式。

4.3

AnimatedContainer 示例代码

AnimatedContainer(
  onEnd: () {
    print('动画结束');
  },
  child: DecoratedBox(
    child: FlutterLogo(size: halfContainerWH,),
    decoration: BoxDecoration(
    //TODO: borderRadius 效果
    borderRadius: selected ? BorderRadius.all(Radius.circular(25.0)) : BorderRadius.all(Radius.circular(0)),
  )),
  duration: Duration(seconds: 2),
  curve: Curves.linearToEaseOut,
  width: selected ? halfContainerWH : containerWH,
  height: selected ? containerWH : halfContainerWH,
  alignment: selected ? Alignment.topCenter : Alignment.center,
  color: selected ? Colors.purpleAccent : Colors.blueGrey),

5

Opacity

5.1

 Opacity 的不透明度

5.2

Opacity 示例代码

Opacity(
  opacity: 1.0,
  child: Container(
    decoration: BoxDecoration(color: Colors.blue),
    child: Text(
      'Opacity: 1.0',
      style: TextStyle(
          color: Colors.white,
          backgroundColor: Colors.blue,
          fontSize: 24.0),
    ),
  ),
  // child: Text('Opacity:1.0'),
),

6

AnimatedOpacity

6.1

AnimatedOpacity 改变透明度前

6.2

AnimatedOpacity 改变透明度后

6.3

AnimatedOpacity 示例代码

AnimatedOpacity(
  onEnd: () {
    print('动画结束');
  },
  opacity: animatedOpacityValue,
  duration: Duration(seconds: 2),
  curve: Curves.fastOutSlowIn,
  child: FlutterLogo(size: 100.0),
),

7

FutureBuilder

7.1

FutureBuilder 效果图

7.2

FutureBuilder 示例代码

FutureBuilder(
future: Dio().get('https://api.github.com/orgs/flutterchina/repos'),
builder: (BuildContext context, AsyncSnapshot snapshot) {
  if (snapshot.connectionState == ConnectionState.done) {
    Response response = snapshot.data;
    // 请求结果有误，显示错误信息
    if (snapshot.hasError) {
      return Text(snapshot.error.toString());
    }
    // 显示请求结果
    return ListView(
      children: response.data
          .map<Widget>((obj) => ListTile(
              title: Text(obj["name"]),
              subtitle: Text(obj["full_name"])))
          .toList(),
    );
  } else if (snapshot.connectionState == ConnectionState.waiting) {
 
 
  } else if (snapshot.connectionState == ConnectionState.none) {
 
 
  }
  // 请求过程中返回进度指示器
  return CircularProgressIndicator(
    strokeWidth: 10.0,
    semanticsLabel: '请稍候...',
);
}),

8

FloationgActionButton 

8.1

居中 FloatingActionButton 效果

8.2

FloationActionButton 居中示例代码

floatingActionButton: FloatingActionButton(
    // child: Text('FAB'),
    child: Icon(Icons.add),
    onPressed: () {
      print('点击FAB');
    },
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  bottomNavigationBar: BottomAppBar(
    color: Colors.blue,
    child: Container(
      height: 44.0,
    ),
  ),

三、Demo

1

Demo下载地址

1.1

FlutterLearingRecord

Demo 下载地址：FlutterLearningRecord：https://github.com/fluttercndev/FlutterLearningRecord

四、参考学习网址

- https://flutter.cn

- https://flutter.dev/docs/get-started/web

- https://flutter.dev/docs/

- https://book.flutterchina.club

- https://book.flutterchina.club/chapter14/

- http://gityuan.com/2019/06/29/flutter_run_app/

- https://juejin.im/post/5cce7042518825415234792d

- https://www.jianshu.com/p/094fab99cec6

- https://juejin.im/post/5d6ce03ef265da03ab426881