使用 flutter 将行和列添加在一起

Question

我正在尝试添加两行和四列，我添加了行但无法添加列，我希望它们具有相同的大小所以我使用了 expanded() 这是一张图片

这就是我想要的

我完成了行但无法添加列

 Widget build(BuildContext context) {
return MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      backgroundColor: Colors.black,
      title: Text("homepage"),
    ),
    backgroundColor: Colors.yellowAccent[700],
    body: SafeArea(
      child: Row(
        children: [
          Expanded(
            child: Container(
              color: Colors.yellowAccent[700],
              child: ClipRRect(
                borderRadius: BorderRadius.circular(20), // Image border
                child: SizedBox.fromSize(
                  size: Size.fromRadius(75), // Image radius
                  child: Image.network('https://picsum.photos/250?image=9',
                      fit: BoxFit.cover),
                ),
              ),
              margin: EdgeInsets.all(15),
            ),
          ),
          Expanded(
            child: Container(
              color: Colors.yellowAccent[700],
              child: ClipRRect(
                borderRadius: BorderRadius.circular(20), // Image border
                child: SizedBox.fromSize(
                  size: Size.fromRadius(75), // Image radius
                  child: Image.network('https://picsum.photos/250?image=9',
                      fit: BoxFit.cover),
                ),
              ),
              margin: EdgeInsets.all(15),
            ),
          ),
        ],
      ),
      
    ),
  ),
);

Answer 1

使用GridView.

 GridView.count(
  crossAxisCount: 2,
  crossAxisSpacing: 10,
  mainAxisSpacing: 10,
  children: [
    ...List.generate(
      6,
      (index) => ClipRRect(
        borderRadius: BorderRadius.circular(20), // Image border
        child: Container(
          color: Colors.yellowAccent[700],
          child: SizedBox.fromSize(
            size: Size.fromRadius(75), // Image radius
            child: Image.network(
                'https://picsum.photos/250?image=9',
                fit: BoxFit.cover),
          ),
        ),
      ),
    )
  ],
),

使用行和列，需要为每一行提供固定的高度。

    body: SafeArea(
          child: LayoutBuilder(
            builder: (context, constraints) => Column(
              children: [
                SizedBox(
                  height: constraints.maxHeight * .3,
                  child: Row(
                    children: [
                      ...List.generate(
                        2,
                        (index) => Expanded(
                          child: Container(
                            color: Colors.yellowAccent[700],
                            padding: EdgeInsets.all(12),
                            child: ClipRRect(
                              borderRadius:
                                  BorderRadius.circular(20), // Image border
                              child: Image.network(
                                  'https://picsum.photos/250?image=9',
                                  fit: BoxFit.cover),
                            ),
                          ),
                        ),
                      )
                    ],
                  ),
                ),
                SizedBox(
                  height: constraints.maxHeight * .3,
                  child: Row(
                    children: [
                      ...List.generate(
                        2,
                        (index) => Expanded(
                          child: Container(
                            color: Colors.yellowAccent[700],
                            padding: EdgeInsets.all(12),
                            child: ClipRRect(
                              borderRadius:
                                  BorderRadius.circular(20), // Image border
                              child: Image.network(
                                  'https://picsum.photos/250?image=9',
                                  fit: BoxFit.cover),
                            ),
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),

Answer 2

return MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      backgroundColor: Colors.black,
      title: Text("homepage"),
    ),
    backgroundColor: Colors.yellowAccent[700],
    body: SafeArea(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Column(
            children: [
              Expanded(
                child: Container(
                  color: Colors.yellowAccent[700],
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(20), // Image border
                    child: SizedBox.fromSize(
                      size: Size.fromRadius(size), // Image radius
                      child: Image.network(
                          'https://picsum.photos/250?image=9' ,
                          fit: BoxFit.cover),
                    ),
                  ),
                  margin: EdgeInsets.all(margin),
                ),
              ),
Expanded(
                child: Container(
                  color: Colors.yellowAccent[700],
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(20), // Image border
                    child: SizedBox.fromSize(
                      size: Size.fromRadius(size), // Image radius
                      child: Image.network(
                          'https://picsum.photos/250?image=9',
                          fit: BoxFit.cover),
                    ),
                  ),
                  margin: EdgeInsets.all(margin),
                ),
              ),
              Expanded(
                child: Container(
                  color: Colors.yellowAccent[700],
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(20), // Image border
                    child: SizedBox.fromSize(
                      size: Size.fromRadius(size), // Image radius
                      child: Image.network(
                          'https://picsum.photos/250?image=9',
                          fit: BoxFit.cover),
                    ),
                  ),
                  margin: EdgeInsets.all(margin),
                ),
              ),
              Expanded(
                child: Container(
                  color: Colors.yellowAccent[700],
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(20), // Image border
                    child: SizedBox.fromSize(
                      size: Size.fromRadius(size), // Image radius
                      child: Image.network(
                          'https://picsum.photos/250?image=9',
                          fit: BoxFit.cover),
                    ),
                  ),
                  margin: EdgeInsets.all(margin),
                ),
              ),
            ],
          ),
Column(
            children: [
              Expanded(
                child: Container(
                  color: Colors.yellowAccent[700],
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(20), // Image border
                    child: SizedBox.fromSize(
                      size: Size.fromRadius(size), // Image radius
                      child: Image.network(
                          'https://picsum.photos/250?image=9',
                          fit: BoxFit.cover),
                    ),
                  ),
                  margin: EdgeInsets.all(margin),
                ),
              ),
              Expanded(
                child: Container(
                  color: Colors.yellowAccent[700],
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(20), // Image border
                    child: SizedBox.fromSize(
                      size: Size.fromRadius(size), // Image radius
                      child: Image.network(
                          'https://picsum.photos/250?image=9',
                          fit: BoxFit.cover),
                    ),
                  ),
                  margin: EdgeInsets.all(margin),
                ),
              ),
Expanded(
                child: Container(
                  color: Colors.yellowAccent[700],
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(20), // Image border
                    child: SizedBox.fromSize(
                      size: Size.fromRadius(size), // Image radius
                      child: Image.network(
                          'https://picsum.photos/250?image=9',
                          fit: BoxFit.cover),
                    ),
                  ),
                  margin: EdgeInsets.all(margin),
                ),
              ),
              Expanded(
                child: Container(
                  color: Colors.yellowAccent[700],
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(20), // Image border
                    child: SizedBox.fromSize(
                      size: Size.fromRadius(size), // Image radius
                      child: Image.network(
                          'https://t3.ftcdn.net/jpg/04/33/08/02/360_F_433080252_BWd42il6gVUmQaXIkASbUrHfKMV3fnqg.jpg',
                          fit: BoxFit.cover),
                    ),
                  ),
                  margin: EdgeInsets.all(margin),
                ),
              ),
            ],
          ),
        ],
      ),
    ),
  ),
);


}
}

这就是答案

我刚刚在展开的行中添加了一列，因此它的大小相同

使用 flutter 将行和列添加在一起

adding rows and columns together using flutter

dart

flutter

flutter-layout