Flutter 通過屏幕旋轉改變 StaggeredGridView crossAxisCount

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

您應該在此鏈接中使用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,
      ...
    )
  }