Flutter容器高度自适应子组件问题求助

你的问题是给Container设置固定高度后，内部子组件显示异常，需要让Container高度根据子组件自动适配，同时保留当前字体大小。以下是具体解决方案：

修改步骤： #

• 移除最外层Container的height: 50，让容器自动根据子元素高度调整尺寸
• 删除右侧包含文本的Container的height: 60和width: 230，避免硬编码尺寸限制布局
• 给右侧的Column添加crossAxisAlignment: CrossAxisAlignment.start，让文本保持左对齐，符合原布局的视觉逻辑
• 可给最外层Container添加padding: EdgeInsets.symmetric(vertical: 8, horizontal: 0)，优化内容与容器边框的间距，提升视觉效果

修改后的完整代码： #

return Column(
  children: [
    Row(
      children: [
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                decoration: BoxDecoration(
                  color: Colors.white.withOpacity(0.1),
                  borderRadius: BorderRadius.circular(30),
                  border: Border.all(color: kColorPurple, width: 1)
                ),
                // 移除固定height，添加内边距优化间距
                padding: const EdgeInsets.symmetric(vertical: 8),
                child: Row(
                  children: [
                    Container(
                      height: 50,
                      width: 50,
                      decoration: BoxDecoration(
                        color: kColorPurple,
                        borderRadius: BorderRadius.circular(30),
                      ),
                      child: const Icon(
                        Icons.title_rounded,
                        size: 30,
                        color: Colors.white,
                      ),
                    ),
                    Container(
                      margin: const EdgeInsets.only(left: 10),
                      // 移除固定height和width
                      child: Column(
                        // 添加左对齐
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          const Text('Titre du projet :',
                            style: TextStyle(
                              fontSize: 16,
                              fontWeight: FontWeight.bold,
                              color: Colors.black,
                            ),
                          ),
                          Container(
                            margin: const EdgeInsets.only(top: 5.0),
                            child: Text(data['tricotTitle'],
                              style: const TextStyle(
                                fontSize: 18,
                                fontWeight: FontWeight.normal,
                                color: Colors.black,
                              ),
                            ),
                          )
                        ],
                      )
                    )
                  ],
                )
              )
            ],
          )
        )
      ]
    ),
  ],
);

这样修改后，容器会自动适配子组件的高度，原有的字体大小完全保留，同时解决了内容显示异常的问题。

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