动态间距GridView中的crossAxisSpacing和mainAxisSpacing

时间:2019-02-11 22:18:00

标签: flutter

Flutter中是否有任何Bootstrap方式可以动态调整任何设备(包括方向)上的网格显示?我知道我们可以使用媒体查询来查找视口的高度和宽度并分配相关的间距,但是考虑到视口分辨率不同的设备数量,这需要大量的工作。例如看下面的代码,我想避免在这里使用硬编码值,因为我的应用使用了总视口的3/4,而1/4占据了组织徽标和名称的主标题\标题

以下方法可能容易出错,除非有简单的方法,否则很难100%正确地设置它

GridView homeGrid = GridView.count(
  // Create a grid 
  primary: false,
  shrinkWrap: true,
  scrollDirection: Axis.vertical,
  crossAxisCount: MediaQuery.of(context).size.width <= 400.0
      ? 4
      : MediaQuery.of(context).size.width >= 1000.0 ? 5 : 4,
  childAspectRatio: 1.0,
  padding: const EdgeInsets.only(top: 10.0),
  mainAxisSpacing: MediaQuery.of(context).size.height-containerHeight <= 640.0
      ? 10.0 : (MediaQuery.of(context).size.height-containerHeight <= 740.0
      ? 20.0 : (MediaQuery.of(context).size.height-containerHeight <= 1100.0
      ? 25.0 : 35.0)),
  crossAxisSpacing: MediaQuery.of(context).size.width <= 400.0
      ? 10.0 : 15.0,
  children: DashboardButtons.map(
    (button) => new Column(
      children: [
        new Expanded(
          flex: 2,
          child: Row(
            children: <Widget>[
              Expanded(
                flex: 1,
                child: Column(
                  children: <Widget>[
                    new FlatButton(

0 个答案:

没有答案