颤振布局在Columan中有6个容器

问题描述

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

解决方法

您可以简单地使用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为2的crossAxisCount（因此每行将有2个项目），然后在其children中生成窗口小部件列表即可。

在DartPad上尝试完整的代码。

,

您可以使用GridView.count，并且可以将对象放在类中以具有灵活的代码，并且可以为可点击容器定义onTap属性，例如以下代码：

class Test1 extends StatelessWidget {
  List<MainObject> list = [
    MainObject(
      onTap: () {/*some actions*/},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,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),fontFamily: 'Montserrat',);
  }
}