将屏幕平均分成4个不同的部分

Question

帮帮我，伙计们，我是 flutter 开发的新手，我正在尝试制作这种类型的布局 here is the layout I wanted 但我得到的是这种布局

Look of the layout is this这是我的代码朋友们请帮助朋友我最近开始开发flutter伙计们我试过安装盒并扩展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)')
                            ],
                          ),
                        )
                      ],),
                  )

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

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

Answer 2

您可以使用 GridView 并将 crossAxisCount 设置为 2。（参见 Flutter）

new GridView.count(
    primary: false,
    padding: const EdgeInsets.all(20.0),
    crossAxisSpacing: 10.0,
    crossAxisCount: 2,
    children: <Widget>[
      const Text('He\'d have you all unravel at the'),
      const Text('Heed not the rabble'),
      const Text('Sound of screams but the'),
      const Text('Who scream'),
      const Text('Revolution is coming...'),
      const Text('Revolution, they...'),
    ],
  ),

将屏幕平均分成4个不同的部分

Divide screen into 4 different parts evenly

dart

flutter

flutter-layout