将屏幕均匀划分为4个不同的部分

Question

帮帮我伙计们我是刚接触开发的新手我试图让这种类型的布局在这里是我想要的布局但我得到这个布局

看看布局是这里这是我的代码朋友请帮助我的朋友我已经开始了扑动的发展最近家伙我曾尝试过装箱和扩展课程以及

Home.dart

class HomeScreen extends StatefulWidget {
      @override
      State<StatefulWidget> createState() {
        HomeScreen_Page homecreatestate() => HomeScreen_Page();
        return homecreatestate();
      }
    }

    class HomeScreen_Page extends State<HomeScreen> {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return new MaterialApp(
          home: new Scaffold(
            appBar: new AppBar(
              title: new Text('Home'),
              backgroundColor: primarycolor,
            ),
            drawer: new Drawer(
              child: new ListView(
                children: <Widget>[
                  new UserAccountsDrawerHeader(
                    accountName: new Text('Ayub Baba'),
                    accountEmail: new Text('ayubbabants@gmail.com'),
                    currentAccountPicture: new CircleAvatar(
                      child: new Text(
                        'A',
                        style: new TextStyle(fontSize: 20.0, color: Colors.white),
                      ),
                      backgroundColor: secondarycolor,
                    ),
                    decoration: new BoxDecoration(color: primarycolor),
                  ),
                  new ListTile(
                    title: new Text('Profile'),
                    trailing: new Icon(Icons.account_circle),
                  ),
                  new ListTile(
                    title: new Text('Contact Us'),
                    trailing: new Icon(Icons.contact_mail),
                  ),
                  new ListTile(
                    title: new Text('Help'),
                    trailing: new Icon(Icons.help_outline),
                  ),
                  new ListTile(
                    trailing: new Icon(Icons.subdirectory_arrow_left),
                    title: new Text('LogOut'),
                  )
                ],
              ),
            ),
            body: new Builder(builder: (BuildContext context) {
              return new Stack(
                fit: StackFit.expand,
                children: <Widget>[
                  new Image.asset(
                    'assets/bg.png',
                    fit: BoxFit.cover,
                  ),
                  new Center(
                    child:   new GridView.count(crossAxisCount: 2,
                      children: <Widget>[
                        new Center(
                          child: new Column(
                            children: <Widget>[
                              new Text('Send'),
                              new Text('(Send a courier)')
                            ],
                          ),
                        ),
                        new Center(
                          child: new Column(
                            children: <Widget>[
                              new Text('Receive'),
                              new Text('(Track Your Courier)')
                            ],
                          ),
                        ),
                        new Center(
                          child: new Column(
                            children: <Widget>[
                              new Text('Shopping'),
                              new Text('(Online Shopping)')
                            ],
                          ),
                        ),
                        new Center(
                          child: new Column(
                            children: <Widget>[
                              new Text('Payments Bills'),
                              new Text('(Eletricity,recharges etc)')
                            ],
                          ),
                        )
                      ],),
                  )

                ],
              );
            }),
          ),
        );
      }
    }

Answer 1

有几种方法.你可以用Row/Column + crossAxisAlignment.stretch+ 来做Expanded

Row(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: <Widget>[
    Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Expanded(
            child: Container(
              color: Colors.red,
            ),
          ),
          Expanded(
            child: Container(
              color: Colors.yellow,
            ),
          ),
        ],
      ),
    ),
    Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Expanded(
            child: Container(
              color: Colors.purple,
            ),
          ),
          Expanded(
            child: Container(
              color: Colors.black,
            ),
          ),
        ],
      ),
    ),
  ],
);

或者GridView和LayoutBuilder

return LayoutBuilder(
  builder: (context, constraint) {
    return new GridView.builder(
      itemCount: 4,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: constraint.maxWidth / constraint.maxHeight,
      ),
      itemBuilder: (context, index) {
        return Container(
          color: Colors.red,
          margin: EdgeInsets.all(4.0),
        );
      },
    );
  },
);