Flutter中如何将变量文本与自定义文本拼接后在界面展示

完全可以实现，核心逻辑是遍历列表时同步获取索引/对应变量，再和自定义文本做字符串拼接后渲染即可，以下是具体实现方式：

通用实现逻辑 #

• 先从继承的id变量对应的数据源列表中，遍历取出每一项的索引值，或直接读取组件传入的widget.index属性
• 按照需求拼接文本：规则为固定文本 + 动态变量 + 自定义后缀，对应你的需求就是"problem " + 索引值 + "：问题编号"，可灵活调整拼接顺序
• 将拼接完成的字符串直接渲染到界面的对应组件内即可

代码示例 #

Flutter 场景（匹配widget.index使用场景） #

如果是遍历列表批量渲染：

// 假设你的问题数据源为questionList，继承的id变量存储在列表项的id字段中
Column(
  children: questionList.asMap().entries.map((entry) {
    int index = entry.key;
    var item = entry.value;
    // 按需求拼接展示文本，索引默认从0开始，需要从1展示的话直接加1即可
    String showText = "problem ${index + 1}：问题编号 ${item.id}";
    return Row(
      children: [
        Text(showText),
        // 其余界面组件按需补充
      ],
    );
  }).toList(),
)

如果是在单个子组件内直接读取传入的widget.index和继承变量id：

// 直接用Text组件展示拼接后的内容即可，自动在同一行渲染
Text("problem ${widget.index + 1}：问题编号 ${id}")

其他前端框架场景（通用逻辑适配） #

如果是Vue/React等框架，只需要替换对应框架的字符串插值语法即可，核心逻辑不变，以Vue为例：

<template>
  <div v-for="(item, index) in questionList" :key="item.id">
    <span>problem {{ index + 1 }}：问题编号 {{ item.id }}</span>
  </div>
</template>

如果需要调整展示格式，只需要修改拼接规则中的文本内容和变量顺序即可，不需要改动整体逻辑。

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