我正在尝试制作这种类型的布局

但是我得到了这个布局

我也试过fitted box和expanded class。

我当前的代码:

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)')
                            ],
                          ),
                        )
                      ],),
                  )
    
                ],
              );
            }),
          ),
        );
      }
    }

最佳答案

有几种方法。您可以使用行/列 + 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),
        );
      },
    );
  },
);

关于flutter - 将屏幕平均分成4个不同的部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50971424/