Flutter中Container内响应式内容实现及内容高度溢出问题解决方案

兄弟，你这个问题我之前也踩过坑——固定高度的Container里堆内容，哪怕用了ReadMoreText做折叠，展开后还是会触发像素溢出。咱们先捋清楚问题根源，再动手改代码：

问题根源 #

你给Container硬设了height: MediaQuery.of(context).size.height * 0.40，但里面的Column是会无限延伸的。当ReadMoreText展开后，所有子组件的总高度超过了Container的固定高度，就会触发溢出。而且你在Column里用了Expanded，这玩意儿依赖父组件的固定尺寸，和滚动组件天生不对付。

解决方案 #

核心思路是让容器有最大高度限制，但允许内容在不超过时自适应，超过时可以滚动。具体要做这几点：

• 把固定height改成maxHeight，给内容一个高度上限
• 用SingleChildScrollView包裹内层的Column，让内容能滚动
• 去掉Column里的Expanded（因为滚动组件没有固定可用空间，Expanded会报错），替换成合适的布局方式

修改后的完整代码 #

Widget _postWidget() {
  return Container(
    // 把固定height改成maxHeight，允许内容在不超过40%屏幕高度时自适应
    maxHeight: MediaQuery.of(context).size.height * 0.40,
    width: MediaQuery.of(context).size.width * 1,
    child: SingleChildScrollView(
      // 允许垂直滚动
      scrollDirection: Axis.vertical,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 去掉原来的Expanded，换成Container包裹头部内容
          Container(
            padding: EdgeInsets.symmetric(horizontal: 20),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Expanded(
                  flex: 1,
                  child: Container(
                    height: 45,
                    width: 45,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: const Color(0xff7c94b6),
                      image: DecorationImage(
                        image: NetworkImage(''),
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                ),
                Expanded(
                  flex: 6,
                  child: Padding(
                    padding: EdgeInsets.symmetric(horizontal: 10),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        RichText(
                          text: TextSpan(
                            text: '[C]post.username ',
                            style: TextStyle(
                                color: Colors.black,
                                fontFamily: 'SukhumvitSetBold',
                                fontWeight: FontWeight.bold),
                            children: const <TextSpan>[
                              TextSpan(
                                  text: '3h',
                                  style: TextStyle(
                                      color: Colors.grey,
                                      fontFamily: 'SukhumvitSetBold',
                                      fontWeight: FontWeight.w400)),
                            ],
                          ),
                        ),
                        Text(
                          '[user]Desuka',
                          style: TextStyle(
                            color: Colors.grey[500],
                            fontFamily: 'SukhumvitSetMedium',
                          ),
                        )
                      ],
                    ),
                  ),
                ),
                Expanded(
                  flex: 2,
                  child: SizedBox(
                    width: 200.0,
                    height: 30.0,
                    child: OutlinedButton(
                      child: Text(
                        'Join+',
                        style: TextStyle(
                          color: HexColor("7225FF"),
                        ),
                      ),
                      onPressed: () => print("it's pressed"),
                      style: ElevatedButton.styleFrom(
                        side: BorderSide(
                          width: 1.5,
                          color: HexColor("7225FF"),
                        ),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(32.0),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
          InkWell(
            child: Container(
              margin: const EdgeInsets.only(
                top: 10,
                bottom: 10,
                right: 20,
                left: 20,
              ),
              width: double.infinity,
              height: 170.0,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(16.0),
                image: DecorationImage(
                  image: NetworkImage(
                      'https://gitlab.com/2Shours/alphapic/raw/master/22.jpeg'),
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),
          SizedBox(height: 5),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            child: Column(
              children: [
                Text(
                  'Travis Scott x Nike Fregment',
                  style: TextStyle(
                      color: Colors.black,
                      fontFamily: 'SukhumvitSetBold',
                      fontSize: 16,
                      fontWeight: FontWeight.bold),
                ),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            child: Column(
              children: [
                ReadMoreText(
                  'The Flutter framework builds its layout via the composition of widgets, everything that you construct programmatically is a widget and these are compiled together to create the user interface. ',
                  style: TextStyle(
                      color: Colors.black,
                      fontSize: 15,
                      fontFamily: 'SukumvitSetMedium'),
                  trimLines: 2,
                  colorClickableText: HexColor("7225FF"),
                  trimMode: TrimMode.Line,
                  trimCollapsedText: 'More',
                  trimExpandedText: ' Less',
                ),
              ],
            ),
          ),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 10.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Row(
                      children: <Widget>[
                        IconButton(
                          icon: Icon(
                            (IconData(
                              0xe902,
                              fontFamily: 'heartPost',
                            )),
                            color: Colors.purple,
                            size: 20,
                          ),
                          iconSize: 30.0,
                          onPressed: () => print('Like post'),
                        ),
                        Text(
                          '2222',
                          style: TextStyle(
                            fontSize: 14.0,
                            fontFamily: 'SukhumvitSetMedium',
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                      ],
                    ),
                    SizedBox(width: 10.0),
                    Row(
                      children: <Widget>[
                        IconButton(
                            icon: Icon(IconData(0xe901, fontFamily: 'commentPost')),
                            iconSize: 20.0,
                            onPressed: () {}),
                        Text(
                          '2222',
                          style: TextStyle(
                            fontSize: 14.0,
                            fontFamily: 'SukhumvitSetMedium',
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                      ],
                    ),
                    SizedBox(width: 20.0),
                    Row(
                      children: <Widget>[
                        IconButton(
                          icon: Icon(IconData(0xe906, fontFamily: 'offerPost')),
                          iconSize: 20.0,
                          onPressed: () {},
                        ),
                        Text(
                          'Offer',
                          style: TextStyle(
                            fontSize: 14.0,
                            fontFamily: 'SukhumvitSetMedium',
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
                IconButton(
                  icon: Icon(
                    (IconData(
                      0xe908,
                      fontFamily: 'wishlistPost',
                    )),
                    color: Colors.purple,
                    size: 20,
                  ),
                  iconSize: 30.0,
                  onPressed: () => print('Save post'),
                ),
              ],
            ),
          ),
        ],
      ),
    ),
  );
}

关键修改点说明 #

1. 容器高度从固定改最大：maxHeight: MediaQuery.of(context).size.height * 0.40，这样当内容总高度小于40%屏幕时，Container会自适应内容高度；超过时会被限制在40%高度内，内部滚动。
2. 添加SingleChildScrollView：包裹内层Column，让内容超过容器高度时可以垂直滚动，彻底解决溢出问题。
3. 移除顶部的Expanded：滚动组件没有固定的可用空间，Expanded在里面会报错，所以直接用Container包裹头部内容，让它自适应高度。

这样调整后，不管ReadMoreText是折叠还是展开，内容都能在容器内正常显示，不会溢出，同时保持了响应式的布局效果。

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