Question

StaggeredGridView像GridView一样支持crossAxisCount，当我为crossAxisCount定义特定的数字（例如1或2）时，效果很好对于此选项，我想通过代码自动更改屏幕尺寸分辨率，例如下面的这段代码可以计算屏幕尺寸，并且可以用于GridView或StaggeredGridView

int _crossAxisCount = 0;
final double screenWidthSize = MediaQuery.of(context).size.width;
if (screenWidthSize > 720) {
  _crossAxisCount = 3;
} else if (screenWidthSize > 520) {
  _crossAxisCount = 2;
} else {
  _crossAxisCount = 1;
}

当我为库_crossAxisCount选项定义crossAxisCount时，它不起作用，仅当我按热重载按钮时才起作用

但是当我将其更改为特定数量时，效果很好

已更新：

LayoutBuilder(
  builder:(context,constraints){
    int _crossAxisCount = 0;
    final double screenWidthSize = MediaQuery.of(context).size.width;
    if (screenWidthSize > 720) {
      _crossAxisCount = 3;
    } else if (screenWidthSize > 520) {
      _crossAxisCount = 2;
    } else {
      _crossAxisCount = 1;
    }
    return StaggeredGridView.countBuilder(
      primary: false,
      physics: const NeverScrollableScrollPhysics(),
      shrinkWrap: true,
      crossAxisCount: _crossAxisCount ,
      mainAxisSpacing: 2.0,
      crossAxisSpacing: 2.0,
      itemCount: feedsList.length,
      itemBuilder: (BuildContext context, int index) => Card(
          clipBehavior: Clip.antiAliasWithSaveLayer,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8.0),
          ),
          color: Colors.white,
          child: Column(
            children: <Widget>[
              BuildFeedsItems(
                  item: feedsList[index] as FeedsItemsList,
                  doubleTapImageEvents: _doubleTapImageEvents,
                  fullScreenDialog: fullScreenDialog,
                  theme: theme )
            ],
          )),
      staggeredTileBuilder: (index) => const StaggeredTile.fit(1),
    );
  },
)

如何帮助我了解这个问题以及如何解决？

Answer 1

从MediaQuery获取屏幕方向，然后根据方向设置crossAxisCount。

StaggeredGridView.countBuilder(
   ...
   crossAxisCount: MediaQuery.of(context).orientation == Orientation.landscape ? 4 : 2,
   ...
)

Answer 2

您应在此link

中使用OrientaionBuilder

示例：

OrientationBuilder(
  builder: (context, orientation) {
    return GridView.count(
      // Create a grid with 2 columns in portrait mode,
      // or 3 columns in landscape mode.
      crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
    );
  },
);

Answer 3

 @override
  Widget build(BuildContext context) {
    int _crossAxisCount = 0;
    return LayoutBuilder(
      builder: (context,constraints){
        if(constraints.maxWidth>720){
            _crossAxisCount = 3;
            return _straggeredView(_crossAxisCount);
        }else if(constraints.maxWidth>520 && constraints.maxWidth<720){
            _crossAxisCount = 2;
            return _straggeredView(_crossAxisCount);
        }else{
            _crossAxisCount = 1;
            return _straggeredView(_crossAxisCount);
        }
      },
    )
}

Widget _straggeredView(_crossAxisCount) {
    return StaggeredGridView.countBuilder(
       crossAxisCount : _crossAxisCount,
      ...
    )
  }

通过屏幕旋转颤振更改StaggeredGridView crossAxisCount

3 个答案: