当项目具有动态高度时，如何根据设备方向创建动态颤动网格布局

Posted 2023-02-23

【中文标题】当项目具有动态高度时，如何根据设备方向创建动态颤动网格布局

【英文标题】：How do I create a dynamic flutter grid layout based on device orientation when the items have dynamic height

【发布时间】：2018-12-29 23:51:58

【问题描述】：

我正在尝试创建一个类似于 android 在联系人应用程序中构建的布局，在创建新联系人（或为此编辑联系人）时，在纵向模式下，整个视图可以滚动，用户的头像放在顶部在从上到下布局中的联系表单中，当您切换到横向模式时，布局会更改为并排布局，头像占据屏幕的左半部分（全高且非滚动-能够）和右侧的联系表格完全可滚动，独立于左侧的头像保持固定。

我尝试使用 flutter_staggered_grid_view 库通过根据设备方向在StaggeredGridView.countBuilder 中设置crossAxisCount 来实现这一点，这样我就可以在交叉轴上只有一个项目之间切换（在纵向模式下有一个垂直布局）到在横轴上有 2 个项目（在有水平布局的横向模式下）。

不幸的是，即使StaggeredGridView.countBuilder 在我切换方向时嵌套在OrientationBuilder 中，布局似乎也不会更新，就好像crossAxisCount 属性不是动态的，并且一旦设置就无法更新。

body: OrientationBuilder(
    builder: (context, or) 
        int cac = (or == Orientation.portrait) ? 1 : 2;
            return StaggeredGridView.countBuilder(
                controller: _listViewScrollController,
                itemBuilder: (BuildContext context, int index)
                    return _view[index];
                ,
                itemCount: 2,
                crossAxisCount: cac,
                staggeredTileBuilder: (int index) 
                    return StaggeredTile.fit(cac);
                ,
                scrollDirection: Axis.vertical,
            );
        ,
    )

网格可能不是创建此类布局的正确方法，如果是这种情况，如果有人能指出正确的方向，我将不胜感激。

提前致谢。

【问题讨论】：

如果有人想根据图像大小获得不同大小的 GridView，请在此处阅读此 SO 答案：***.com/questions/49781657/…

【参考方案1】：

我认为更好的方法是使用Row、Column 和SingleChildScrollView：

你可以试试这样的：

Widget buildBody(BuildContext context) 
    return OrientationBuilder(builder: (context, orientation) 
      if (orientation == Orientation.portrait) 
        return SingleChildScrollView(
          child: Column(
            children: <Widget>[
              _buildAvatar(context, orientation),
              _buildFields(context),
            ],
          ),
        );
       else 
        return Row(
          children: <Widget>[
            _buildAvatar(context, orientation),
            Expanded(
              child: SingleChildScrollView(
                child: _buildFields(context),
              ),
            ),
          ],
        );
      
    );
  

  Widget _buildAvatar(BuildContext context, Orientation orientation) 
    return Container(
      height: 300.0,
      width: orientation == Orientation.landscape ? 300.0 : null,
      color: Colors.blue,
      child: Center(
        child: CircleAvatar(
          backgroundColor: Colors.white,
          child: Text('RR'),
        ),
      ),
    );
  

  Widget _buildFields(BuildContext context) 
    return Container(
      height: 800.0,
      color: Colors.white,
      child: Center(
        child: Container(
          height: 250.0,
          width: 250.0,
          color: Colors.red,
        ),
      ),
    );
  

buildBody 函数将创建上面的布局，您必须替换 _buildAvatar 和 _buildFields 的内容以满足您的需要。

【讨论】：

这是我已经尝试过的布局，但是因为在方向更改时会重新构建表单，并且正在重置字段中的数据。 TextEditController 会在重建后保留表单数据吗？

哦，好吧，这不是这个问题的主题，如果你想要一个详细的解决方案，你可能需要为此发布另一个问题。但是是的，您必须创建 TextEditControllers 以将数据保存在您的 State 中。