Flutter横向ListView中Divider分割线不显示问题

原因分析 #

Divider组件默认会尽可能占据父容器的可用宽度，但你的代码里Column设置了mainAxisSize: MainAxisSize.min，外层Card的宽度由子元素自适应，导致Divider没有足够的宽度空间渲染，所以无法显示。

修复方案 #

给Divider指定明确宽度，或者用Container替代实现分割线效果，确保它能获得足够的显示空间。

修改后的代码示例：

Widget build(BuildContext context) {
    return ListView.builder(
        scrollDirection: Axis.horizontal,
        shrinkWrap: false,
        physics: const BouncingScrollPhysics(),
        itemBuilder: (context, int i) {
          return Center(
            child: Card(
              child: GestureDetector(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  children: const [
                    SizedBox(
                      height: 15,
                      width: 100,
                      child: ClipRRect(
                          child: Text("admistraction")),
                    ),
                    // 方案1：给Divider指定固定宽度
                    Divider(
                      thickness: 2,
                      color: Colors.lightBlue,
                      width: 100, // 和上方文本容器宽度保持一致
                    ),
                    // 方案2：用Container自定义分割线（更灵活）
                    // Container(
                    //   width: 100,
                    //   height: 2,
                    //   color: Colors.lightBlue,
                    // ),
                    Padding(
                        padding: EdgeInsets.only(left: 15.0, right: 5),
                        child: Text(
                          "Start Learning",
                        )),
                  ],
                ),
              ),
            ),
          );
        },
        itemCount: 5);
  }

补充说明 #

• 方案1直接给Divider添加width参数，保证分割线宽度和上方文本容器统一，视觉更协调。
• 方案2用Container替代Divider，适合需要调整分割线边距、圆角等自定义样式的场景。

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