颤动中的水平网格视图

时间:2021-04-29 08:39:17

标签: flutter flutter-layout

我想制作一个具有自定义高度和宽度的水平网格视图。

var _screenWidth = MediaQuery.of(context).size.width;
var _screenHeight = MediaQuery.of(context).size.height;

var _crossAxisSpacing = _screenWidth * 0.08;

var _crossAxisCount = 3;

var _width = (_screenWidth - ((_crossAxisCount - 1) * _crossAxisSpacing)) /
    _crossAxisCount;
print(_width.toString() + ">>>>" + _screenWidth.toString());
var cellHeight = 270;

var _aspectRatio = _width / cellHeight;

我使用了这个 _aspectRatio 网格视图,但没有得到响应 Gridview,我想要这个:

Here is my design

1 个答案:

答案 0 :(得分:0)

实际上我有一种不同的方式来构建我的小部件,但我希望这个简单的小部件可以帮助你。

SingleChildScrollView(
    physics: ScrollPhysics(),
    child: ListView.builder(
      shrinkWrap: true,
        itemBuilder: (context, index) {
          return Card(
            margin: EdgeInsets.all(20),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(20)
            ),
            color: Colors.red,
            child: Container(
              child: Row(
                children: [
                  Container(
                    height: 100,
                    width: 100,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      color: Colors.green,
                    ),
                    child: Text('lala'),
                  ),
                  Container(
                    child: Text('lele'),
                    color: Colors.orange,
                  )
                ],
              ),
            ),
          );
        },
      itemCount: 5,
    ),
  )

谢谢