Flutter 基础汇总

男娘i 2022-02-28 07:58 236阅读 0赞

# Flutter 基础汇总 #

## 基础Widgets ##

Widget的功能是“描述一个UI元素的配置数据”，它就是说，Widget其实并不是表示最终绘制在设备屏幕上的显示元素，而只是显示元素的一个配置数据。

Flutter中真正代表屏幕上显示元素的类是`Element`，也就是说Widget只是描述`Element`的一个配置。

总结一下：

*  Widget实际上就是Element的配置数据，Widget树实际上是一个配置树，而真正的UI渲染树是由Element构成；不过，由于Element是通过Widget生成，所以它们之间有对应关系，所以在大多数场景，我们可以宽泛地认为Widget树就是指UI控件树或UI渲染树。
 *  一个Widget对象可以对应多个Element对象。这很好理解，根据同一份配置（Widget），可以创建多个实例（Element）。

读者应该将这两点牢记在心中。

### State ###

一个StatefulWidget类会对应一个State类，State表示与其对应的StatefulWidget要维护的状态，State中的保存的状态信息可以：

1.  在widget build时可以被同步读取。
2.  在widget生命周期中可以被改变，当State被改变时，可以手动调用其`setState()`方法通知Flutter framework状态发生改变，Flutter framework在收到消息后，会重新调用其`build`方法重新构建widget树，从而达到更新UI的目的。

State中有两个常用属性：

1.  `widget`，它表示与该State实例关联的widget实例，由Flutter framework动态设置。注意，这种关联并非永久的，因为在应用声明周期中，UI树上的某一个节点的widget实例在重新构建时可能会变化，但State实例只会在第一次插入到树中时被创建，当在重新构建时，如果widget被修改了，Flutter framework会动态设置State.widget为新的widget实例。
2.  `context`，它是`BuildContext`类的一个实例，表示构建widget的上下文，它是操作widget在树中位置的一个句柄，它包含了一些查找、遍历当前Widget树的一些方法。每一个widget都有一个自己的context对象。

Basic组件+Material组件：

*  `Text`带格式的文本
 *  `Row/Column`弹性空间布局类
 *  `Stack`取代线性布局，允许堆叠，通过Positioned定位四边位置。
 *  `Container`矩形区域，可进行margin,padding,background,border,shadow等修饰
 *  `RaisedButton`悬浮按钮，`FlatButton`扁平按钮，`OutlineButton`边框按钮，`IconButton`图标按钮。
 *  `Image`使用`ImageProvider`提供的内容显示图片
 *  `Icon`参考https://material.io/tools/icons/，在yaml配置中开启后可直接使用
 *  `Switch/Checkbox`继承自`statelesswidget`不保存状态，触发`onchanged`回调
 *  `TextField`输入框组合，包含图标、提示文本、验证等

布局类Widget:

*  `Row`水平布局，默认占满整行，高度跟随控件高度。通过`mainAxisSize`控制占用范围，`mainAxisAlignment`对齐
 *  `Column`垂直布局，默认占满整个高，宽度等于控件高度。
 *  `Flex`弹性布局，一般配合`Expanded`使用。flex系数为0或者null时不会被扩张，否则按比例分割。
 *  `Wrap`流式布局，spacing主轴间距，runspacing纵轴间距，runAlignment纵轴对齐
 *  `Flow`流式布局2，类似Wrap, 但需要自己实现widget位置转换。
 *  `Stack`允许内部容器堆叠，子控件通过Positioned widget包裹控件进行绝对定位。

容器类Widget:

*  Padding 添加额外空白，EdgeInsets 提供all/only/symmetric等便捷方法设置
 *  ConstrainedBox 对齐子控件的约束，BoxConstraints设置限制条件，SizedBox固定大小
 *  DecoratedBox 在绘制widget前后绘制装饰内容，边框、背景、渐变等
 *  Transform在绘制Widget时进行矩阵变换。
 *  Container 是上述容器的一个组合，可以同时设置几乎所有可能的内容。

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

大多数APP都会包含一个导航栏、抽屉菜单、底部Tab导航等，十分无聊，所以有一个脚手架工具Scaffold:

*  一个导航栏
 *  导航栏右侧有分享按钮
 *  有一个抽屉菜单
 *  有一个底部导航
 *  右下角有一个悬浮动作按钮

class ScaffoldRoute extends StatefulWidget {
      @override
      _ScaffoldRouteState createState() => _ScaffoldRouteState();
    }
    
    class _ScaffoldRouteState extends State<ScaffoldRoute> {
      int _selectedIndex = 1;
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar( //导航栏
            title: Text("App Name"), 
            actions: <Widget>[ //导航栏右侧菜单
              IconButton(icon: Icon(Icons.share), onPressed: () {}),
            ],
          ),
          drawer: new MyDrawer(), //抽屉
          bottomNavigationBar: BottomNavigationBar( // 底部导航
            items: <BottomNavigationBarItem>[
              BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
              BottomNavigationBarItem(icon: Icon(Icons.business), title: Text('Business')),
              BottomNavigationBarItem(icon: Icon(Icons.school), title: Text('School')),
            ],
            currentIndex: _selectedIndex,
            fixedColor: Colors.blue,
            onTap: _onItemTapped,
          ),
          floatingActionButton: FloatingActionButton( //悬浮按钮
              child: Icon(Icons.add),
              onPressed:_onAdd
          ),
        );
      }
      void _onItemTapped(int index) {
        setState(() {
          _selectedIndex = index;
        });
      }
      void _onAdd(){
      }
    }

其他常用组件：

*  `Scrollable`可滚动Widget，Scrollbar是对应的Material风格滚动指示器，可直接作为父控件用在某个子控件上。
 *  `SingleChildScrollView`接收一个子的viewport，`ListView`列表，`GridView`表格

功能型控件：

不会影响UI布局及外观的Widget，它们通常具有一定的功能，如事件监听、数据存储等，我们之前介绍过的FocusScope（焦点控制）、PageStorage（数据存储）、NotificationListener（事件监听）都属于功能型Widget。

*  `WillPopScope`导航返回拦截
 *  `InheritedWidget`可以高效的将数据在Widget树中向下传递、共享
 *  `ThemeData`是Material Design Widget库的主题数据,通过`Theme.of`方法来获取当前的ThemeData。

# 事件处理 #

原始指针事件（Point Event）：

Flutter中可以使用Listener widget来监听原始触摸事件，它也是一个功能性widget。

//定义一个状态，保存当前指针位置
    PointerEvent _event;
    ...
    Listener(
      child: Container(
        alignment: Alignment.center,
        color: Colors.blue,
        width: 300.0,
        height: 150.0,
        child: Text(_event?.toString()??"",style: TextStyle(color: Colors.white)),
      ),
      //behavior: HitTestBehavior.opaque,
      onPointerDown: (PointerDownEvent event) => setState(()=>_event=event),
      onPointerMove: (PointerMoveEvent event) => setState(()=>_event=event),
      onPointerUp: (PointerUpEvent event) => setState(()=>_event=event),
    ),

当指针按下时，Flutter会对应用程序执行**命中测试(Hit Test)**，以确定指针与屏幕接触的位置存在哪些widget， 指针按下事件（以及该指针的后续事件）然后被分发到由命中测试发现的最内部的widget，然后从那里开始，事件会在widget树中向上冒泡，这些事件会从最内部的widget被分发到到widget根的路径上的所有Widget，这和Web开发中浏览器的**事件冒泡**机制相似， 但是Flutter中没有机制取消或停止冒泡过程，而浏览器的冒泡是可以停止的。

behavior控制子控件如何相应命中测试:

*  deferToChild 传递给子控件，如果相应，则父子都有相应
 *  opaque 相应整个区域（透明部分也会相应）
 *  translucent 透明区域穿透，其他部分类似deferToChild

使用`IgnorePointer/AbsorbPointer`阻止子树接收指针事件。

手势识别(GestureDetector):

class GestureDetectorTestRoute extends StatefulWidget {
      @override
      _GestureDetectorTestRouteState createState() =>
          new _GestureDetectorTestRouteState();
    }
    
    class _GestureDetectorTestRouteState extends State<GestureDetectorTestRoute> {
      String _operation = "No Gesture detected!"; //保存事件名
      @override
      Widget build(BuildContext context) {
        return Center(
          child: GestureDetector(
            child: Container(
              alignment: Alignment.center,
              color: Colors.blue,
              width: 200.0, 
              height: 100.0,
              child: Text(_operation,
                style: TextStyle(color: Colors.white),
              ),
            ),
            onTap: () => updateText("Tap"),//点击
            onDoubleTap: () => updateText("DoubleTap"), //双击
            onLongPress: () => updateText("LongPress"), //长按
          ),
        );
      }
    
      void updateText(String text) {
        //更新显示的事件名
        setState(() {
          _operation = text;
        });
      }
    }

**注意**： 当同时监听`onTap`和`onDoubleTap`事件时，当用户触发tap事件时，会有200毫秒左右的延时，这是因为当用户点击完之后很可能会再次点击以触发双击事件，所以GestureDetector会等一断时间来确定是否为双击事件。如果用户只监听了`onTap`（没有监听`onDoubleTap`）事件时，则没有延时。

拖动，滑动：

class _Drag extends StatefulWidget {
      @override
      _DragState createState() => new _DragState();
    }
    
    class _DragState extends State<_Drag> with SingleTickerProviderStateMixin {
      double _top = 0.0; //距顶部的偏移
      double _left = 0.0;//距左边的偏移
    
      @override
      Widget build(BuildContext context) {
        return Stack(
          children: <Widget>[
            Positioned(
              top: _top,
              left: _left,
              child: GestureDetector(
                child: CircleAvatar(child: Text("A")),
                //手指按下时会触发此回调
                onPanDown: (DragDownDetails e) {
                  //打印手指按下的位置(相对于屏幕)
                  print("用户手指按下：${e.globalPosition}");
                },
                //手指滑动时会触发此回调
                onPanUpdate: (DragUpdateDetails e) {
                  //用户手指滑动时，更新偏移，重新构建
                  setState(() {
                    _left += e.delta.dx;
                    _top += e.delta.dy;
                  });
                },
                onPanEnd: (DragEndDetails e){
                  //打印滑动结束时在x、y轴上的速度
                  print(e.velocity);
                },
              ),
            )
          ],
        );
      }
    }

缩放： onScaleUpdate

有可能发生冲突，所以，可以监听原始指针onPointerDown/onPointerUp

# 文件与网络 #

Flutter使用的是Dart IO相关内容完成，除了路径有差异，其他的一样。

*  临时目录 getTemporaryDirectory()
 *  文档目录 getApplicationDocumentsDirectory() 应用卸载时才被清除
 *  外部存储器目录 getExternalStorageDirectory()

网路请求：

import 'dart:convert';
    import 'dart:io';
    
    import 'package:flutter/material.dart';
    
    class HttpTestRoute extends StatefulWidget {
      @override
      _HttpTestRouteState createState() => new _HttpTestRouteState();
    }
    
    class _HttpTestRouteState extends State<HttpTestRoute> {
      bool _loading = false;
      String _text = "";
    
      @override
      Widget build(BuildContext context) {
        return ConstrainedBox(
          constraints: BoxConstraints.expand(),
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                RaisedButton(
                    child: Text("获取百度首页"),
                    onPressed: _loading ? null : () async {
                      setState(() {
                        _loading = true;
                        _text = "正在请求...";
                      });
                      try {
                        //创建一个HttpClient
                        HttpClient httpClient = new HttpClient();
                        //打开Http连接
                        HttpClientRequest request = await httpClient.getUrl(
                            Uri.parse("https://www.baidu.com"));
                        //使用iPhone的UA
                        request.headers.add("user-agent", "Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1");
                        //等待连接服务器（会将请求信息发送给服务器）
                        HttpClientResponse response = await request.close();
                        //读取响应内容
                        _text = await response.transform(utf8.decoder).join();
                        //输出响应头
                        print(response.headers);
    
                        //关闭client后，通过该client发起的所有请求都会中止。
                        httpClient.close();
    
                      } catch (e) {
                        _text = "请求失败：$e";
                      } finally {
                        setState(() {
                          _loading = false;
                        });
                      }
                    }
                ),
                Container(
                    width: MediaQuery.of(context).size.width-50.0,
                    child: Text(_text.replaceAll(new RegExp(r"\s"), ""))
                )
              ],
            ),
          ),
        );
      }
    }

自带的库比较麻烦，一般使用第三方`Dio`，支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时等。

Websocket:

import 'package:flutter/material.dart';
    import 'package:web_socket_channel/io.dart';
    
    class WebSocketRoute extends StatefulWidget {
      @override
      _WebSocketRouteState createState() => new _WebSocketRouteState();
    }
    
    class _WebSocketRouteState extends State<WebSocketRoute> {
      TextEditingController _controller = new TextEditingController();
      IOWebSocketChannel channel;
      String _text = "";
    
    
      @override
      void initState() {
        //创建websocket连接
        channel = new IOWebSocketChannel.connect('ws://echo.websocket.org');
      }
    
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          appBar: new AppBar(
            title: new Text("WebSocket(内容回显)"),
          ),
          body: new Padding(
            padding: const EdgeInsets.all(20.0),
            child: new Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                new Form(
                  child: new TextFormField(
                    controller: _controller,
                    decoration: new InputDecoration(labelText: 'Send a message'),
                  ),
                ),
                new StreamBuilder(
                  stream: channel.stream,
                  builder: (context, snapshot) {
                    //网络不通会走到这
                    if (snapshot.hasError) {
                      _text = "网络不通...";
                    } else if (snapshot.hasData) {
                      _text = "echo: "+snapshot.data;
                    }
                    return new Padding(
                      padding: const EdgeInsets.symmetric(vertical: 24.0),
                      child: new Text(_text),
                    );
                  },
                )
              ],
            ),
          ),
          floatingActionButton: new FloatingActionButton(
            onPressed: _sendMessage,
            tooltip: 'Send message',
            child: new Icon(Icons.send),
          ),
        );
      }
    
      void _sendMessage() {
        if (_controller.text.isNotEmpty) {
          channel.sink.add(_controller.text);
        }
      }
    
      @override
      void dispose() {
        channel.sink.close();
        super.dispose();
      }
    }

普通Socket:

使用Dart:IO直接处理

_request() async{
      //建立连接
      var socket=await Socket.connect("baidu.com", 80);
      //根据http协议，发送请求头
      socket.writeln("GET / HTTP/1.1");
      socket.writeln("Host:baidu.com");
      socket.writeln("Connection:close");
      socket.writeln();
      await socket.flush(); //发送
      //读取返回内容
      _response =await socket.transform(utf8.decoder).join();
      await socket.close();
    }

JSON处理：

普通json处理方法

//一个JSON格式的用户列表字符串
    String jsonStr='[{"name":"Jack"},{"name":"Rose"}]';
    //将JSON字符串转为Dart对象(此处是List)
    List items=json.decode(jsonStr);
    //输出第一个用户的姓名
    print(items[0]["name"]);

使用Model方式：

Map userMap = json.decode(json);
    var user = new User.fromJson(userMap);
    
    print('Howdy, ${user.name}!');
    print('We sent the verification link to ${user.email}.');

为了省略手动编写model的麻烦，官方建议使用`json_serializable`处理。