Flutter布局锦囊---用户协议声明

设计给的效果如下：

UI布局图

拿到设计后，先把整体拆分成几个部分：

1. “用户协议声明”，使用文本（Text）组件和文字跨度（TextSpan）组件组成的用户协议声明文本。

然后就可以开始进行编码了。

第1步：绘制组件树

用户协议声明的组件树

第2步：实现“用户协议声明”

因为Flutter的嵌套结构非常复杂，所以你必须将所有可以重复的东西都提取出来，增强代码可读性。

import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';

/// 用户协议中“低调”文本的样式。
final TextStyle _lowProfileStyle = TextStyle(
  fontSize: 12.0,
  color: Color(0xFF4A4A4A),
);

/// 用户协议中“高调”文本的样式。
final TextStyle _highProfileStyle = TextStyle(
  fontSize: 12.0,
  color: Color(0xFF00CED2),
);

这个布局挺有意思的，用1个文字跨度（TextSpan）组件里包含3个文字跨度（TextSpan）组件来布局，这应该是最简单的布局结构了吧。

/// 自定义的用户协议组件。
class UserAgreement extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // 文本（`Text`）组件，是一系列具有单一样式的文本。
    // 文本.丰富（`Text.rich`）构造函数，则是使用文字跨度（`TextSpan`）组件创建文本。
    return Text.rich(
      // 文字跨度（`TextSpan`）组件，不可变的文本范围。
      TextSpan(
        // 文本（`text`）属性，跨度中包含的文本。
        text: '登录即同意',
        // 样式（`style`）属性，应用于文本和子组件的样式。
        style: _lowProfileStyle,
        children: [
          TextSpan(
            // 识别（`recognizer`）属性，一个手势识别器，它将接收触及此文本范围的事件。
            // 手势（`gestures`）库的点击手势识别器（`TapGestureRecognizer`）类，识别点击手势。
            recognizer: TapGestureRecognizer()..onTap = () {
              print('点击了“服务条款”');
            },
            text: '“服务条款”',
            style: _highProfileStyle,
          ),
          TextSpan(
            text: '和',
            style: _lowProfileStyle,
          ),
          TextSpan(
            recognizer: TapGestureRecognizer()..onTap = () {
              print('点击了“隐私政策”');
            },
            text: '“隐私政策”',
            style: _highProfileStyle,
          ),
        ],
      ),
    );
  }
}

第3步：还原效果

用户协议声明的还原效果