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步:还原效果

用户协议声明的还原效果

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 酷酷鲨 设计师:CSDN官方博客 返回首页