flutter - 如何使 GridView 组件居中

Question

您好，我是 Flutter 的新手，我在将图标的组件居中时遇到问题，任何人都可以建议将仪表板图标居中的正确方法。我仍在尝试修复它，但如果您能为我提供一些建议，那就太好了. 我尝试将它逐行放置，但问题仍然相同，也填充在我创建的小部件上

Widget build(BuildContext context){
final _width = MediaQuery.of(context).size.width;
final _height = MediaQuery.of(context).size.height;

  return new Stack(children: <Widget>[
    new Container(color: Colors.blue,),
    new Scaffold(
      appBar: AppBar(
        title: Text("Welcome"),
        centerTitle: true,
      ),
      drawer: MenuComponent(),
      backgroundColor: Colors.transparent,
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                    child: Align(
                      alignment: FractionalOffset.topCenter,
                      child: Padding(
                        padding: EdgeInsets.all(10.0),
                        child: SizedBox(
                          height: 50,
                          width: 130,
                          child:new Text('One', style: new TextStyle(fontWeight: FontWeight.bold, fontSize: _width/15, color: Colors.white),),
                        ),
                      ),
                    )
                ),
                new Divider(height: _height/30,color: Colors.white,),
              ],
            ),
           Expanded(
             child: Center(
               child:  GridView.count(
                 padding: const EdgeInsets.all(20.0),
                 crossAxisSpacing: 10.0,
                 mainAxisSpacing: 10.0,

                 crossAxisCount: 4,
                 children: <Widget>[
                   homePageRowCell(Icons.account_circle, "My Account",context,HomePage()),
                   homePageRowCell(Icons.dashboard, "Home page",context, HomePage()),
                   homePageRowCell(Icons.person_outline, "Profile",context, ProfilePage()),
                   homePageRowCell(Icons.settings, "Settings",context, Settings()),
                   homePageRowCell(Icons.exit_to_app, "Logout",context, LoginPage()),
                 ],
               ),
             )
           )
          ],
        ),
      ),
    )
  ],);
//    return Scaffold(
//      appBar: AppBar(
//        title: Text("Home Page"),
//        centerTitle: true,
//      ),
//      drawer: MenuComponent(),
//    );
  }
}

Widget homePageRowCell(var sIcon, String title, BuildContext context, var page) => new Container(
  child: GestureDetector(
      onTap: () {
        Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => page)
        );
      },
    child: new Row(
      children: <Widget>[
        Column(
            children: <Widget>[
              new Icon(sIcon,color: Colors.white,),
              new Text(title,style: new TextStyle(color: Colors.white, fontWeight: FontWeight.normal)),
            ],
          ),

      ],
    ),
  )
);

标签： flutterdartflutter-layout

Answer 1

请尝试以下代码并检查输出

   @override
  Widget build(BuildContext context) {
    final _width = MediaQuery.of(context).size.width;
    final _height = MediaQuery.of(context).size.height;

    return new Stack(
      children: <Widget>[
        new Container(
          color: Colors.blue,
        ),
        new Scaffold(
          appBar: AppBar(
            title: Text("Welcome"),
            centerTitle: true,
          ),
        drawer: MenuComponent(),
          backgroundColor: Colors.transparent,
          body: new Center(
            child: new Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Expanded(
                        child: Align(
                      alignment: FractionalOffset.topCenter,
                      child: Padding(
                        padding: EdgeInsets.all(10.0),
                        child: SizedBox(
                          height: 50,
                          width: 130,
                          child: new Text(
                            'One',
                            style: new TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: _width / 15,
                                color: Colors.white),
                          ),
                        ),
                      ),
                    )),
                    new Divider(
                      height: _height / 30,
                      color: Colors.white,
                    ),
                  ],
                ),
                Expanded(
                    child: Center(
                  child: GridView.count(
                    crossAxisCount: 4,
                    crossAxisSpacing: 10.0,
                    mainAxisSpacing: 10.0,
                    children: <Widget>[
                      homePageRowCell(Icons.account_circle, "My Account",
                          context, HomePage()),
                      homePageRowCell(
                          Icons.dashboard, "Home page", context, HomePage()),
                      homePageRowCell(Icons.person_outline, "Profile", context,
                          ProfilePage()),
                      homePageRowCell(
                          Icons.settings, "Settings", context, Settings()),
                      homePageRowCell(
                          Icons.exit_to_app, "Logout", context, LoginPage()),
                    ],
                  ),
                ))
              ],
            ),
          ),
        )
      ],
    );
//    return Scaffold(
//      appBar: AppBar(
//        title: Text("Home Page"),
//        centerTitle: true,
//      ),
//      drawer: MenuComponent(),
//    );
  }

Widget homePageRowCell(
        var sIcon, String title, BuildContext context, var page) =>
    new Container(
        child: GestureDetector(
      onTap: () {
        Navigator.push(context, MaterialPageRoute(builder: (context) => page));
      },
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Column(
            children: <Widget>[
              new Icon(
                sIcon,
                color: Colors.white,
              ),
              new Text(title,
                  style: new TextStyle(
                      color: Colors.white, fontWeight: FontWeight.normal)),
            ],
          ),
        ],
      ),
    ));