ListView中Parent Data Widget误用及CustomTag文本溢出解决问询

1. 修复Parent Data Widget错误 #

ListView的子组件不能直接使用Expanded，Expanded仅适用于Column/Row/Flex这类Flex布局的子元素。直接移除ListView children中的Expanded组件即可解决该错误。

2. 实现第一个标签文本换行、其余标签位置固定 #

需要从内外两层布局调整：

• 外层Row中，用Flexible包裹第一个CustomTag，让它占据Row的剩余可用空间，同时不挤压另外两个标签的位置。
• 第一个CustomTag内部的Text组件，移除maxLines: 1的限制（或设置为null/允许多行），让文本可以自动换行；同时给Text套一层Flexible，确保在CustomTag内部能换行。

修改后的完整代码 #

ListView(
  children: [
    HeadlineofArticle(article: article),
    Container( // 移除了Expanded
      padding: const EdgeInsets.all(20.0),
      decoration: const BoxDecoration(
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(20.0),
            topRight: Radius.circular(20.0)),
        color: Colors.white,
      ),
      child: Column(
        children: [
          Row(
            children: [
              // 外层用Flexible包裹第一个CustomTag
              Flexible(
                child: CustomTag(background: Colors.black, children: [
                  CircleAvatar(
                    radius: 10,
                    backgroundImage:
                        NetworkImage(article.urlToImage.toString()),
                  ),
                  const SizedBox(width: 10),
                  // 内部Text用Flexible包裹并移除maxLines限制
                  Flexible(
                    child: Text(
                      article.author.toString(),
                      // 移除maxLines:1，或设置为null/允许多行
                      style: Theme.of(context)
                          .textTheme
                          .bodyMedium!
                          .copyWith(color: Colors.white),
                    ),
                  )
                ]),
              ),
              CustomTag(background: Colors.grey.shade200, children: [
                const Icon(
                  Icons.timer,
                  color: Colors.grey,
                ),
                const SizedBox(width: 10),
                Text(
                  "TIME",
                  style: Theme.of(context)
                      .textTheme
                      .bodyMedium!
                      .copyWith(color: Colors.black),
                )
              ]),
              const SizedBox(
                width: 10,
              ),
              CustomTag(
                background: Colors.grey.shade200,
                children: [
                  const Icon(
                    Icons.remove_red_eye,
                    color: Colors.grey,
                  ),
                  Text(
                    " VIEW ",
                    style: Theme.of(context)
                        .textTheme
                        .bodyMedium!
                        .copyWith(color: Colors.black),
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    ),
  ],
)

关键说明 #

• 移除Expanded：解决ListView中Parent Data Widget的错误，因为ListView不是Flex布局，无法解析Expanded的布局约束。
• 外层Flexible：确保第一个CustomTag在Row中仅占用剩余空间，不会挤压右侧两个固定尺寸的标签。
• 内层Flexible+移除maxLines：让第一个标签内的文本可以自动换行，避免像素溢出。

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