dart - 如何在 Flutter 中渲染行或列的后续子项？

Question

演示

解释

想象一个 Widget 树 要么 水平(指的是 direction 参数) Dismissible 在 Row 或 Column 中的垂直 Dismissible。

Dismissible ，在这两种情况下，都被另外两个 Widget 包围。

两种情况:

Row(
  children: <Widget>[
    WillAppearBelowDismissibleThatIsBeingSwipedToTheLeft(),
    Dismissible(
      direction: DismissDirection.horizontal, child...),
    WillAppearAboveDismissibleThatIsBeingSwipedToTheRight(),
  ],)
// other case
Column(
  children: <Widget>[
    WillAppearBelowDismissibleThatIsBeingSwipedUpwards(),
    Dismissible(
      direction: DismissDirection.vertical, child...),
    WillAppearAboveDismissibleThatIsBeingSwipedDownwards(),
  ],)

正如您可能理解的那样，Dismissible 将滑向其中一个方向，它将覆盖 Widgets ，但不在另一个。

如何在 Row 或 all Widget 下呈现我的 Dismissible 的子级或 列 和反之亦然？

在标题中，我谈到了“稍后”和“较早”。我的意思是它们出现在 List 中的顺序，因为它们出现得越晚，它们就会呈现得越高。我认为从我的演示中可以很容易地观察到这一点，因为 一个圆圈 被 Dismissible 覆盖，但另一个不被覆盖。

我想为两个 红色圆圈实现相同的行为。

要尝试的代码:

import 'package:flutter/material.dart';

void main() => runApp(
  MaterialApp(
    home: Scaffold(
      body: SafeArea(
        child: Row(
          children: <Widget>[
            Expanded(
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.redAccent,
                  shape: BoxShape.circle,
                ),
              ),
            ),
            Dismissible(
              key: ObjectKey(0),
              direction: DismissDirection.horizontal,
              child: Container(
                height: 150.0,
                width: 150.0,
                decoration: BoxDecoration(
                  color: Colors.amber,
                  shape: BoxShape.circle,
                ),
              ),
            ),
            Expanded(
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.redAccent,
                  shape: BoxShape.circle,
                ),
              ),
            ),
          ],
        ),
      ),
    ),
  ),
);

Answer 1

经过更多的修补，我得到了令人满意的结果。我使用了 Stack，但只从我的 Row 中删除了 Dismissible。

对于我的问题中的示例代码，它看起来像这样:

import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        home: Scaffold(
          body: SafeArea(
            child: Stack(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Expanded(
                      child: Center(
                        child: Container(
                          decoration: BoxDecoration(
                            color: Colors.redAccent,
                            shape: BoxShape.circle,
                          ),
                        ),
                      ),
                    ),
                    Expanded(
                      child: Container(),
                    ),
                    Expanded(
                      child: Center(
                        child: Container(
                          decoration: BoxDecoration(
                            color: Colors.redAccent,
                            shape: BoxShape.circle,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
                Center(
                  child: Dismissible(
                    key: ObjectKey(0),
                    direction: DismissDirection.horizontal,
                    child: Container(
                      height: 150.0,
                      width: 150.0,
                      decoration: BoxDecoration(
                        color: Colors.amber,
                        shape: BoxShape.circle,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );

本质上，我用 Stack 包围了所有内容，将 Row 中的 Dismissible 替换为另一个 展开，然后将 Dismissible 放入 Stack 中的 Center 中。