Flutter使用RichText开发引导页未达预期，屏幕显示代码如何解决

问题核心是类型不匹配导致的：

• 你在_introductionData数组的第一个元素的text字段里存了RichText组件实例，但是后续传递参数时调用了.toString()方法，相当于直接把组件的对象描述字符串传给了渲染层
• IntroductionContent组件定义时把text字段声明为字符串类型，并且用Text组件渲染，自然只会输出字符串内容，不会解析为富文本组件

1. 统一_introductionData的text字段类型为Widget #

把原来数组里的普通文本都用Text组件包裹，保持样式和你之前定义的一致，修改后的数组如下：

final List<Map<String, Object>> _introductionData = [
  {
    "image": "assets/images/intro_1.png",
    "title": "",
    "text": RichText(
      textAlign: TextAlign.center,
      text: const TextSpan(
        style: TextStyle(
          fontSize: 12,
          color: Colors.white,
          height: 1.5
        ),
        children: [
          TextSpan(
            text: 'Sign in first time ',
            style: TextStyle(
              fontWeight: FontWeight.bold,
            ),
          ),
          TextSpan(text: 'success to get '),
          TextSpan(
            text: '50% off coupon ',
            style: TextStyle(
              fontWeight: FontWeight.bold,
            ),
          ),
          TextSpan(text: 'and '),
          TextSpan(
            text: 'lottery code ',
            style: TextStyle(
              fontWeight: FontWeight.bold,
            ),
          ),
          TextSpan(text: 'to join '),
          TextSpan(
            text: '"Download app, get big prize" ',
            style: TextStyle(
              fontWeight: FontWeight.bold,
            ),
          ),
          TextSpan(text: 'have a chance '),
          TextSpan(
            text: 'to win a smart tv ',
            style: TextStyle(
              fontWeight: FontWeight.bold,
            ),
          ),
          TextSpan(text: 'worth nearly 1000\$.')
        ],
      ),
    ),
  },
  {
    "image": "assets/images/intro_2.png",
    "title": "Super convenient online pharmacy",
    "text": const Text(
      'Full of great deals, free shipping from 13$. Accumulate Extracare points after every purchase.',
      textAlign: TextAlign.center,
      style: TextStyle(
        fontSize: 12,
        color: Colors.white,
        height: 1.5,
      ),
    ),
  },
  {
    "image": "assets/images/intro_3.png",
    "title": "Consult with a pharmacist online via video.",
    "text": const Text(
      'Advice on prescriptions and drug use from a team of highly qualified pharmacists.',
      textAlign: TextAlign.center,
      style: TextStyle(
        fontSize: 12,
        color: Colors.white,
        height: 1.5,
      ),
    )
  },
  {
    "image": "assets/images/intro_4.png",
    "title": "Look up drug information and disease symptoms",
    "text": const Text(
      'Update the latest health information, look up information quickly and accurately.',
      textAlign: TextAlign.center,
      style: TextStyle(
        fontSize: 12,
        color: Colors.white,
        height: 1.5,
      ),
    ),
  },
];

2. 修改IntroductionContent组件的参数类型 #

把text字段从字符串类型改成Widget类型，直接渲染传入的组件即可：

class IntroductionContent extends StatelessWidget {
  const IntroductionContent({
    Key? key,
    this.title,
    this.text,
    this.image,
  }) : super(key: key);

  final String? title, image;
  // text字段改为Widget类型
  final Widget? text;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        const Spacer(),
        const Spacer(),
        Image.asset(
          image!,
          height: 250,
        ),
        const Spacer(),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 40),
          child: Text(
            title!,
            textAlign: TextAlign.center,
            style: const TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 20,
              color: Colors.white,
            ),
          ),
        ),
        const Padding(padding: EdgeInsets.only(top: 20)),
        // 直接渲染传入的text组件，无需再套Text
        text!,
      ],
    );
  }
}

3. 修改PageView传参逻辑 #

去掉text字段的.toString()调用，直接传入Widget即可：

itemBuilder: (context, index) => IntroductionContent(
  image: _introductionData[index]['image'].toString(),
  title: _introductionData[index]['title'].toString(),
  // 去掉toString，直接转换为Widget类型
  text: _introductionData[index]['text'] as Widget,
),

补充优化：可以给title和text增加非空判断，第一个元素的title为空字符串时，可以返回SizedBox.shrink()避免不必要的空白占位。

内容的提问来源于stack exchange，提问作者NDungx