zl程序教程

您现在的位置是:首页 >  移动开发

当前栏目

flutter中富文本 图文排列

flutter 文本 图文 排列
2023-09-27 14:28:53 时间
使用WidgetSpan能够存放不是TextSpan格式的Widget

Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Expanded(
          flex: 1,
          child: Text.rich(
            TextSpan(
              children:[
                WidgetSpan(
                  child: Icon(Icons.add, color: Colors.deepOrangeAccent, size: ScreenAdapter.size(35),),
                ),
                TextSpan(
                  text:'很骄傲实打实的就卡机按计划奥术杀了肯德基拉就开始弹尽粮绝大师大',
                  style: TextStyle(
                    fontSize: ScreenAdapter.size(30)
                  ),
                )
              ]
            )
          ),
        )
      ],
    ),

 

 

 1.RichText
  2.TextSpan
  3.WidgetSpan        (实现富文本中的背景自定义)

  例如:

               RichText(
                            text: TextSpan(
                                  text: "登录代表同意",
                                  style: TextStyle(
                                      color: Styles.rgb_color_666,
                                      fontSize: Styles.textsize_13),
                                  children: [
                                    TextSpan(
                                        text: "《***用户协议》",
                                        style: TextStyle(
                                          color: Styles.rgb_color_FFF36E22,
                                          fontSize: Styles.textsize_13,
                                        ),
                                        recognizer: TapGestureRecognizer()
                                          ..onTap = () {}),
                                    TextSpan(
                                        text: "和 ",
                                        style: TextStyle(
                                            color: Styles.rgb_color_666,
                                            fontSize: Styles.textsize_13)),
                                    TextSpan(
                                        text: "《隐私政策》",
                                        style: TextStyle(
                                            color: Styles.rgb_color_FFF36E22,
                                            fontSize: Styles.textsize_13),
                                        recognizer: TapGestureRecognizer()
                                          ..onTap = () {}),
                                  ]),
                            )