如何居中GridView组件

问题描述 投票:-2回答:1

您好,我是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)),
            ],
          ),

      ],
    ),
  )
);

issue

flutter dart flutter-layout
1个回答
1
投票

请尝试下面的代码并检查输出

© www.soinside.com 2019 - 2024. All rights reserved.