Question

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

Look of the layout is this，这是我的代码朋友，请帮助我最近开始开发flutter的朋友，我也尝试过机顶盒和扩大课程的人

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

有几种方法。您可以使用行/列+ 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个不同的部分

2 个答案: