Question

我在具有两行的flutter App中使用了卡片小部件，问题是两行之间出现了很大的空间，如下图所示

如何解决此问题？

我在这里尝试过的代码：

return Card(

                      child: Container(
                        alignment: FractionalOffset.center,
                        child: Row(
                          children: <Widget>[
                            Expanded(
                              flex: 1,
                              child: Container(
                                child: ListTile(

                                  title: Text(snapshot.data[index].data["title"],
                                    textDirection: TextDirection.rtl,
                                    style: TextStyle(fontSize: 14.0,
                                        fontFamily: 'Cairo',
                                        fontWeight: FontWeight.bold),),
                                  onTap: () => navigateToDetails(snapshot.data[index]),

                                ),
                              ),
                            ),
                            //SizedBox(width: 1.0),
                            Expanded(
                              flex: 1,
                              child: Container(child: Image.network(snapshot.data[index].data["image_url"],height: 80.0,width: 80.0)),
                            ),


                          ],
                        ),
                      ),
                    );

Answer 1

将MainAxisAlignment：MainAxisAlignment.center属性添加到您的Row小部件中

下面的代码应该对您有用。

  return Card(
    child: Container(
      alignment: FractionalOffset.center,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Expanded(
            flex: 1,
            child: Container(
              child: ListTile(
                title: Text(
                  snapshot.data[index].data["title"],
                  textDirection: TextDirection.rtl,
                  style: TextStyle(
                      fontSize: 14.0,
                      fontFamily: 'Cairo',
                      fontWeight: FontWeight.bold),
                ),
                onTap: () => navigateToDetails(snapshot.data[index]),
              ),
            ),
          ),
          //SizedBox(width: 1.0),
          Expanded(
            flex: 1,
            child: Container(
                child: Image.network(snapshot.data[index].data["image_url"],
                    height: 80.0, width: 80.0)),
          ),
        ],
      ),
    ),
  );

Answer 2

您正在行内使用扩展的窗口小部件，因此这两个窗口小部件都将尝试获得相同的宽度，并尝试覆盖可能的整个宽度。

因此，如果要删除行小部件之间的空间，请删除扩展的小部件并使用Row的 MainAxisAlignment 属性来安排或管理空间。

您可以使用以下值：

MainAxisAlignment.spaceBetween 和 MainAxisAlignment.spaceEvenly

如何删除卡片中各行之间的空间（颤振）

2 个答案: