Flutter(88):Text组件之RichText

Flutter教学目录持续更新中

Github源代码持续更新中

1.RichText介绍

一个富文本Text,可以显示多种样式的text。这个组件跟Text.rich()差不多:Flutter(7):基础组件之Text

2.使用

    return Scaffold(
      appBar: AppBar(
        title: Text('RichText'),
      ),
      body: RichText(
        text: TextSpan(
          text: '登陆即同意',
          style: TextStyle(color: Colors.black),
          children: [
            WidgetSpan(
              alignment: PlaceholderAlignment.middle,
              child: Image.asset(
                AssetPathConstant.imageScan,
                width: 40,
                height: 40,
              ),
            ),
            TextSpan(
              text: '《服务条款》',
              style: TextStyle(color: Colors.red),
              recognizer: TapGestureRecognizer()
                ..onTap = () {
                  ToastUtil.showToast('服务条款');
                },
            ),
            TextSpan(
              text: '和',
              style: TextStyle(color: Colors.black),
            ),
            WidgetSpan(
              alignment: PlaceholderAlignment.bottom,
              child: Image.asset(
                AssetPathConstant.imageScan,
                width: 40,
                height: 40,
              ),
            ),
            TextSpan(
              text: '《隐私政策》',
              style: TextStyle(color: Colors.red),
              recognizer: TapGestureRecognizer()
                ..onTap = () {
                  ToastUtil.showToast('隐私政策');
                },
            ),
          ],
        ),
      ),
    );
image.png

Flutter教学目录持续更新中

Github源代码持续更新中

推荐阅读更多精彩内容