Flutter开发中如何将指定Text组件插入到现有代码的对应位置？

你可以根据实际展示需求选择对应的插入方式，以下是两种最常用的场景实现：

场景1：商品名称展示在图片下方 #

return InkWell(
  onTap: () => Navigator.push(
    context,
    MaterialPageRoute(
      builder: (BuildContext context) => ImageScreen(
        url: '${_productosModel[index].image}' + '?alt=media',
      ),
    ),
  ),
  child: Column(
    children: [
      Expanded(
        child: CachedNetworkImage(
          imageUrl: '${_productosModel[index].image}' + '?alt=media',
          fit: BoxFit.cover,
          placeholder: (_, __) {
            return Center(
              child: CupertinoActivityIndicator(
                radius: 15,
              ),
            );
          },
        ),
      ),
      // 插入的目标Text组件
      Text(
        '${_productosModel[index].name}',
        textAlign: TextAlign.center,
        style: TextStyle(fontSize: 20.0),
      ),
    ],
  ),
);

场景2：商品名称叠加在图片底部 #

return InkWell(
  onTap: () => Navigator.push(
    context,
    MaterialPageRoute(
      builder: (BuildContext context) => ImageScreen(
        url: '${_productosModel[index].image}' + '?alt=media',
      ),
    ),
  ),
  child: Expanded(
    child: Stack(
      fit: StackFit.expand,
      children: [
        CachedNetworkImage(
          imageUrl: '${_productosModel[index].image}' + '?alt=media',
          fit: BoxFit.cover,
          placeholder: (_, __) {
            return Center(
              child: CupertinoActivityIndicator(
                radius: 15,
              ),
            );
          },
        ),
        Positioned(
          bottom: 0,
          left: 0,
          right: 0,
          child: Container(
            color: Colors.black54,
            padding: const EdgeInsets.symmetric(vertical: 8),
            child: Text(
              '${_productosModel[index].name}',
              textAlign: TextAlign.center,
              style: const TextStyle(
                fontSize: 20.0,
                color: Colors.white,
              ),
            ),
          ),
        ),
      ],
    ),
  ),
);

注意事项 #

• 原代码直接把Expanded作为InkWell的child，只有当InkWell的父级是Row/Column/Flex时才不会报错，场景1的写法已经适配了通用的布局场景
• 如果你原本标注的//code TEXT位置是要在图片加载阶段显示文字，直接在placeholder返回的Center内嵌套Column，放入CupertinoActivityIndicator和目标Text组件即可

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