Flutter技术问题：如何实现一行仅显示两个元素，其余自动换行？

嘿，我来帮你搞定这个每行只显示两个元素的需求～你现在用Row来渲染列表的方式有个核心问题：Row是单行布局组件，它会把所有子元素挤在同一行里，超出屏幕范围就会溢出，根本不会自动换行。要实现每行固定数量的元素，Flutter里有两个非常好用的组件可以直接解决这个问题：Wrap 或者 GridView.count，我给你分别讲讲怎么改：

方案一：用Wrap组件实现流式换行 #

Wrap就像网页里的流式布局，当子元素超出当前行宽度时会自动换到下一行，还能轻松控制元素间的间距。把你代码里的Row替换成Wrap，再给每个子元素设置合适的宽度就行：

Container _subjectwise(BuildContext context) { // 记得加context参数，用来获取屏幕宽度
  return Container( 
    margin: EdgeInsets.only(top: 10), 
    child: Wrap(
      spacing: 8.0, // 水平方向两个元素之间的间距
      runSpacing: 8.0, // 垂直方向两行之间的间距
      children: listofsubject != null && listofsubject.length > 0 
          ? listofsubject.map((item) { 
              return SizedBox(
                // 计算每个元素的宽度：屏幕宽度减去左右边距和水平间距，然后平分给两个元素
                width: (MediaQuery.of(context).size.width - 24) / 2, 
                child: Card( 
                  shape: RoundedRectangleBorder( 
                    borderRadius: BorderRadius.circular(2.0), 
                  ), 
                  color: Colors.white, 
                  elevation: 3, 
                  child: Padding( 
                    padding: EdgeInsets.only(top: 3, bottom: 3, left: 0, right: 0), 
                    child: Row( 
                      mainAxisAlignment: MainAxisAlignment.start, 
                      children: <Widget>[ 
                        SizedBox(width: 10), 
                        Image( 
                          image: AssetImage("images/live.png"), 
                          width: 35, 
                          fit: BoxFit.cover), 
                        SizedBox(width: 5), 
                        Expanded( 
                          flex: 1, 
                          child: ListTile( 
                            dense: true, 
                            contentPadding: EdgeInsets.only(right: 0), 
                            title: Text( 
                              // 这里记得替换成item的实际字段，比如item.subjectName，别用固定文本哦
                              item.subjectName, 
                              style: TextStyle( 
                                fontSize: 12, fontWeight: FontWeight.w600), 
                            ), 
                          ), 
                        ), 
                      ], 
                    ), 
                  ), 
                ),
              ); 
            }).toList() 
          : [], 
    ), 
  ); 
}

方案二：用GridView.count实现规整网格布局 #

如果你想要更整齐的网格效果，GridView.count是更省心的选择，只需要设置crossAxisCount: 2就能直接实现每行两个元素：

Container _subjectwise() { 
  return Container( 
    margin: EdgeInsets.only(top: 10), 
    child: GridView.count(
      shrinkWrap: true, // 让GridView自适应内容高度，避免父组件高度溢出
      physics: NeverScrollableScrollPhysics(), // 如果父组件已经有滚动（比如ListView），禁用GridView自身的滚动
      crossAxisCount: 2, // 核心参数：每行显示2个元素
      crossAxisSpacing: 8.0, // 水平元素间距
      mainAxisSpacing: 8.0, // 垂直元素间距
      children: listofsubject != null && listofsubject.length > 0 
          ? listofsubject.map((item) { 
              return Card( 
                shape: RoundedRectangleBorder( 
                  borderRadius: BorderRadius.circular(2.0), 
                ), 
                color: Colors.white, 
                elevation: 3, 
                child: Padding( 
                  padding: EdgeInsets.only(top: 3, bottom: 3, left: 0, right: 0), 
                  child: Row( 
                    mainAxisAlignment: MainAxisAlignment.start, 
                    children: <Widget>[ 
                      SizedBox(width: 10), 
                      Image( 
                        image: AssetImage("images/live.png"), 
                        width: 35, 
                        fit: BoxFit.cover), 
                      SizedBox(width: 5), 
                      Expanded( 
                        flex: 1, 
                        child: ListTile( 
                          dense: true, 
                          contentPadding: EdgeInsets.only(right: 0), 
                          title: Text( 
                            item.subjectName, 
                            style: TextStyle( 
                              fontSize: 12, fontWeight: FontWeight.w600), 
                          ), 
                        ), 
                      ), 
                    ], 
                  ), 
                ), 
              ); 
            }).toList() 
          : [], 
    ), 
  ); 
}

小提醒 #

• 你原来的代码里Text是固定的'Mental Ability'，记得替换成item对应的字段（比如item.subjectName），不然所有卡片显示的内容都一样啦。
• 如果你的_subjectwise方法没有context参数，要记得加上，不然用MediaQuery的时候会报错。

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