Flutter 布局（Columan 中的 6 个容器）[关闭]

Posted 2023-02-23

【中文标题】Flutter 布局（Columan 中的 6 个容器）[关闭]

【英文标题】：Flutter layout (6 container in Columan ) [closed]

【发布时间】：2021-01-07 19:26:23

【问题描述】：

我想在 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,
            ),
          ),
        ),
      ),
    );
  

【参考方案1】：

您可以使用GridView.count，您可以将您的对象放在一个类中以获得灵活的代码，您可以为可点击容器定义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,
            ),
          ),
        ),
      ),
    );
  

【参考方案2】：

您可以简单地使用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 中生成您的小部件列表。

在DartPad 上试用完整代码。