时间戳

首页 > 解决方案 > 如何在 Flutter 中渲染 Row 或 Column 的后续子级？

dart - 如何在 Flutter 中渲染 Row 或 Column 的后续子级？

问题描述

示范

动画片

解释

想象一Widget棵树，在 a 中具有水平（参考direction参数）或Dismissible在 a 中具有垂直。Row DismissibleColumn

在这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但不会在另一个方向上。

如何在 a or中Dismissible渲染我的下面所有的孩子， 反之亦然？WidgetRowColumn

在标题中，我谈到了“后来”和“早期”。我的意思是它们出现的顺序，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,
                ),
              ),
            ),
          ],
        ),
      ),
    ),
  ),
);

标签： dartflutter

解决方案

经过更多的修补，我得到了令人满意的结果。我使用了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,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );

本质上，我用 a 包围了所有内容，用另一个Stack替换了Dismissible in theRowExpanded，然后将 a 放在Dismissible了Stack里面Center。

推荐阅读