dart - 如何在Flutter中渲染行或列的后代子元素？

示范



说明

想象一棵Widget树，其中direction中有一个水平(引用Dismissible参数)Row或Dismissible中有一个垂直Column。

在这两种情况下， 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的，但掩盖了另一个。

如何在Dismissible或Widget和中将所有 Row的下的Column的子对象呈现为，反之亦然？

在标题中，我谈论“稍后”和“更早”。我的意思是它们在List中出现的顺序，因为它们出现在Dismissible中的时间越晚，它们将被呈现的越高。我认为可以轻松地从我的演示中观察到这一点，因为ojit_code掩盖了一个圆圈，但另一个圆圈掩盖了。

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

尝试代码:

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,
                ),
              ),
            ),
          ],
        ),
      ),
    ),
  ),
);

最佳答案

经过一番修补后，我得到了令人满意的结果。我使用了Stack，但是仅从我的Dismissible中删除了Row。

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

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包围，用另一个Dismissible替换Row中的Expanded，然后将Dismissible放在Stack内的Center中。