如何在Gridview.count中实现以下UI？

Question

我想要前两个项目并排，第三个项目应该放在前两个项目的下面，就在中间。

我尝试更改 crossAxisCount 但没有帮助。

我已经使用了 GridView.count 小部件。

提前谢谢您。

Answer 1

仍然有一种方法可以使用 count 命名构造函数来进行设计，请查看以下代码。

import 'package:flutter/material.dart';
class Home extends StatelessWidget {
  int count = 1;

  @override
  Widget build(BuildContext context) {
    print('called');
    return SafeArea(
      child: Scaffold(
        body: GridView.count(
          crossAxisCount: 1,
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
          childAspectRatio: 2,
          padding: EdgeInsets.all(10),
          children: List.generate(10, (index) {
            count++;
            print(count);
            return (count.isEven)
                ? Row(
                    children: [
                      Expanded(
                        child: Container(
                          padding: EdgeInsets.only(right: 5),
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(10),
                              image: DecorationImage(
                                image: AssetImage('images/1.jpg'),
                                fit: BoxFit.cover,
                              )),
                        ),
                      ),
                      SizedBox(
                        width: 10,
                      ),
                      Expanded(
                        child: Container(
                          padding: EdgeInsets.only(left: 5),
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(10),
                              image: DecorationImage(
                                image: AssetImage('images/1.jpg'),
                                fit: BoxFit.cover,
                              )),
                        ),
                      )
                    ],
                  )
                : Padding(
                    padding: EdgeInsets.only(
                        left: MediaQuery.of(context).size.width / 4,
                        right: MediaQuery.of(context).size.width / 4),
                    child: Container(
                      decoration: BoxDecoration(
                        border: Border.all(color: Colors.blue,width: 3),
                          borderRadius: BorderRadius.circular(10),
                          image: DecorationImage(
                            image: AssetImage('images/1.jpg'),
                            fit: BoxFit.cover,
                          )),
                    ),
                  );
          }),
        ),
      ),
    );
  }
}

所有的想法都是围绕计算构建项目（图像）的数量来决定以下项目是包含一张图像还是两张图像。

对于两个图像（将它们放在一行中）。

结果：

希望对您有帮助。