Flutter中如何设置Container组件随文本自适应的动态高度

我在Container组件内部嵌套了Text组件，当文本内容超过4行时会向Container底部溢出。需要设置Container的动态高度，使其高度随文本行数自动适配，避免底部溢出问题。目前给Container设置了固定高度值，若移除该固定高度，Container会直接消失无法显示。

home组件代码 #

Widget build(BuildContext context) {
 return Container (
   child:    SliverToBoxAdapter(
                        child: Container(
                          height: 180,
                          margin: EdgeInsets.only(top: 10),
                          child: CustomeInfoWidget(
                            infoData: _infoDataList,
                          ),
                        ),
                      ),
) 
}

CustomeInfoWidget组件代码 #

Widget build(BuildContext context) {
    final double _width = MediaQuery.of(context).size.width;

    return Container(
      margin: EdgeInsets.only(top: 15, left: 15, right: 15),
      child: Stack(
        children: [
          PageView.builder(
            itemCount: widget._infoDataList.length,
            controller: _pageController,
            
            itemBuilder: (BuildContext context, int index) {
              return Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    width: _width - 10,
                    child: Padding(
                      padding: const EdgeInsets.only(bottom: 10),
                      child: Text(widget._infoDataList[index].title,
                          textAlign: TextAlign.left,
                         
                  ),
                  Container(
                    child: Text(
                      widget._infoDataList[index].content,
                    
                    ),
                  )
                ],
              );
            },
          ),
        
        ],
      ),
    );
  }

问题出在两个布局逻辑上：

• 外层Container硬编码了height: 180的固定高度，内部文本行数变多后超出容器约束，自然会从底部溢出
• 组件里嵌套的PageView.builder属于滑动组件，本身没有固有高度，直接放在Stack、Column这类垂直布局中如果没有明确的尺寸约束，会触发布局错误导致组件不显示，这就是移除固定高度后Container消失的原因
• 原代码中标题部分的Padding、Container标签没有正常闭合，也会触发布局异常

PageView是横向滑动的多页组件，不能直接去掉固定高度，需要在页面切换时动态计算当前页文本内容的实际高度，自动更新容器尺寸，按以下步骤修改即可：

1. 去掉外层Container写死的height: 180属性
2. 给Text组件添加maxLines: null属性，允许文本自动换行
3. 新增高度计算逻辑，页面初始化和切换时自动测量当前页文本的实际高度，更新容器尺寸

修改后的可用代码参考：

改造后的CustomeInfoWidget代码 #

class CustomeInfoWidget extends StatefulWidget {
  final List infoDataList;
  const CustomeInfoWidget({Key? key, required this.infoDataList}) : super(key: key);

  @override
  State<CustomeInfoWidget> createState() => _CustomeInfoWidgetState();
}

class _CustomeInfoWidgetState extends State<CustomeInfoWidget> {
  final PageController _pageController = PageController();
  // 初始给最小高度，避免首帧渲染空白
  double _currentHeight = 100;

  // 计算指定索引页内容的实际渲染高度
  void _calculatePageHeight(int index) {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      final titleText = widget.infoDataList[index].title;
      final contentText = widget.infoDataList[index].content;
      final screenWidth = MediaQuery.of(context).size.width;
      // 计算文本可用宽度：屏幕宽度减去左右margin、padding
      final textMaxWidth = screenWidth - 40;

      // 测量标题文本高度
      final titlePainter = TextPainter(
        text: TextSpan(text: titleText, style: const TextStyle(fontSize: 16)),
        maxLines: null,
        textDirection: TextDirection.ltr,
      )..layout(maxWidth: textMaxWidth);

      // 测量内容文本高度
      final contentPainter = TextPainter(
        text: TextSpan(text: contentText, style: const TextStyle(fontSize: 14)),
        maxLines: null,
        textDirection: TextDirection.ltr,
      )..layout(maxWidth: textMaxWidth);

      // 总高度 = 标题高度 + 内容高度 + 内部间距 + 上下margin
      final totalHeight = titlePainter.height + contentPainter.height + 40;
      if (mounted && _currentHeight != totalHeight) {
        setState(() {
          _currentHeight = totalHeight;
        });
      }
    });
  }

  @override
  void initState() {
    super.initState();
    // 初始化时计算第一页高度
    _calculatePageHeight(0);
    // 监听页面滑动，切换页面后重新计算高度
    _pageController.addListener(() {
      if (_pageController.page != null) {
        final currentIndex = _pageController.page!.round();
        _calculatePageHeight(currentIndex);
      }
    });
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final double screenWidth = MediaQuery.of(context).size.width;
    return Container(
      margin: const EdgeInsets.only(top: 15, left: 15, right: 15),
      height: _currentHeight,
      child: Stack(
        children: [
          PageView.builder(
            itemCount: widget.infoDataList.length,
            controller: _pageController,
            itemBuilder: (BuildContext context, int index) {
              return Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: [
                  Container(
                    width: screenWidth - 10,
                    child: Padding(
                      padding: const EdgeInsets.only(bottom: 10),
                      child: Text(
                        widget.infoDataList[index].title,
                        textAlign: TextAlign.left,
                        maxLines: null,
                      ),
                    ),
                  ),
                  Container(
                    child: Text(
                      widget.infoDataList[index].content,
                      maxLines: null,
                    ),
                  )
                ],
              );
            },
          ),
        ],
      ),
    );
  }
}

home组件对应调整 #

删除原Container中写死的height属性即可：

Widget build(BuildContext context) {
  return Container (
    child: SliverToBoxAdapter(
      child: Container(
        margin: EdgeInsets.only(top: 10),
        child: CustomeInfoWidget(
          infoData: _infoDataList,
        ),
      ),
    ),
  );
}

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