Flutter 布局（Column 中有 6 个容器）

Question

我想在 Column 中制作 6 个容器并使容器可点击 like in the image

    class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Cours et exercices pour S5 LST IETEL"),
      ),
      body: Container(
        height: 150.0,
        width: 150.0,
        margin: const EdgeInsets.all(20.0),
        padding: EdgeInsets.symmetric(horizontal: 17.8, vertical: 30.5),
        alignment: Alignment.bottomCenter,
        decoration: new BoxDecoration(
            // color: Colors.green,
            color: Hexcolor("#230A59"),
            borderRadius: new BorderRadius.only(
                topLeft: const Radius.circular(40.0),
                topRight: const Radius.circular(40.0))),
        child: Center(
          child: Text(
            "Electronique Analogique",
            style: TextStyle(
              color: Hexcolor("#f2f2f2"),
              fontWeight: FontWeight.bold,
              fontFamily: 'Montserrat',
              fontSize: 20,
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

您可以简单地使用 GridView.count 来帮助您生成布局。

代码示例

class MyWidget extends StatelessWidget {
  final List<String> items;

  MyWidget({this.items = const []});

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 2,
      children: <Widget>[
        ...items
            .map<Widget>(
              (e) => Container(
                height: 150,
                width: 150,
                margin: const EdgeInsets.all(20.0),
                padding: EdgeInsets.symmetric(horizontal: 17.8, vertical: 30.5),
                alignment: Alignment.bottomCenter,
                decoration: BoxDecoration(
                  color: Color(0xFF230A59),
                  borderRadius: BorderRadius.only(
                    topLeft: const Radius.circular(40.0),
                    topRight: const Radius.circular(40.0),
                  ),
                ),
                child: Center(
                  child: Text(
                    e,
                    style: TextStyle(
                      color: Color(0xFFf2f2f2),
                      fontWeight: FontWeight.bold,
//               fontFamily: 'Montserrat',
                      fontSize: 20,
                    ),
                  ),
                ),
              ),
            )
            .toList(),
      ],
    );
  }
}

您只需创建一个 GridView，其中 crossAxisCount 为 2（因此每行将有 2 个项目），然后只需在其 children.[=16 中生成您的小部件列表=]

在 DartPad 上尝试完整代码。

Answer 2

您可以使用 GridView.count，您可以将对象放在 class 中以获得灵活的代码，您可以为可点击的容器定义 onTap 属性，如下面的代码:

class Test1 extends StatelessWidget {
  List<MainObject> list = [
    MainObject(
      onTap: () {/*some actions*/},
    ),
    MainObject(),
    MainObject(),
    MainObject(),
    MainObject(),
    MainObject(),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Cours et exercices pour S5 LST IETEL"),
        ),
        body: GridView.count(
          shrinkWrap: true,
          scrollDirection: Axis.vertical,
          crossAxisCount: 2,
          physics: ScrollPhysics(),
          children: List.generate(list.length, (index) => list[index]),
        ));
  }
}

class MainObject extends StatelessWidget {
  final Function onTap;
  MainObject({this.onTap});
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        height: 150.0,
        width: 150.0,
        margin: const EdgeInsets.all(20.0),
        padding: EdgeInsets.symmetric(horizontal: 17.8, vertical: 30.5),
        alignment: Alignment.bottomCenter,
        decoration: new BoxDecoration(
// color: Colors.green,
            color: Color(0xff230A59),
            borderRadius: new BorderRadius.only(
                topLeft: const Radius.circular(40.0),
                topRight: const Radius.circular(40.0))),
        child: Center(
          child: Text(
            "Electronique Analogique",
            style: TextStyle(
              color: Color(0xfff2f2f2),
              fontWeight: FontWeight.bold,
              fontFamily: 'Montserrat',
              fontSize: 20,
            ),
          ),
        ),
      ),
    );
  }
}