Question

我正在尝试创建类似于Android在Contacts App中构建的布局，当创建一个新联系人（或为此编辑一个联系人）时，在纵向模式下，整个视图都是可滚动的，并且用户头像放在顶部从上到下的布局中的联系人表单，当您切换到横向模式时，该布局将变为并排布局，其中化身占据了屏幕的左半部分（全高和非滚动，可以），并且右侧的联系表单完全可滚动，而与左侧的固定头像无关。

我尝试通过基于设备方向在crossAxisCount中设置StaggeredGridView.countBuilder来使用flutter_staggered_grid_view库实现此目的，这将使它能够在横轴上只有1个项目之间进行切换（在纵向模式下为垂直布局）在横轴上有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,
            );
        },
    )

很有可能网格不是创建这样的布局的正确方法，如果是这样，我很感激如果有人能指出我正确的方向。

谢谢。

Answer 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的内容才能满足您的需求。

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

1 个答案: