Question

示范

说明

想象一下 Widget树，其中水平（指direction参数）Dismissible {{1} } {em>或 Row中的垂直Dismissible。

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

以下是两种情况：

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 和<{1>}或<{1}} 中将Widget的孩子呈现在所有 Row下面强>反之亦然 ？

在标题中，我谈论“稍后”和“之前”。我的意思是它们出现在Column中的顺序，因为它们出现在它的后面，它们将被渲染得越高。我认为这可以从我的演示中轻松观察到，因为{em>一个圈被List覆盖，而不是另一个。

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

代码尝试：

Dismissible

Answer 1

经过一些修修补补后，我得到了令人满意的结果。我使用了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内{1}}。

Answer 2

您可以结合Stack小部件和定位小部件的强大功能来实现您想要的效果：）

在下面的示例中，Dismissible超过了其他2个小部件：

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Layout',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DismissibleDemo(),
    );
  }
}

class DismissibleDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: SafeArea(
        child: Stack(
          fit: StackFit.expand,
          children: <Widget>[
            new Positioned(
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.redAccent,
                    shape: BoxShape.circle,
                  ),
                  height: 100.0,
                  width: 100.0,
                ),
                left: 0.0,
                top: (MediaQuery.of(context).size.height / 2) - 50),
            new Positioned(
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.redAccent,
                    shape: BoxShape.circle,
                  ),
                ),
                height: 100.0,
                width: 100.0,
                right: 0.0,
                top: (MediaQuery.of(context).size.height / 2) - 50),
            new Positioned(
              child: Dismissible(
                key: ObjectKey(0),
                direction: DismissDirection.horizontal,
                child: Container(
                  height: 120.0,
                  width: 120.0,
                  decoration: BoxDecoration(
                    color: Colors.amber,
                    shape: BoxShape.circle,
                  ),
                ),
              ),
              left: (MediaQuery.of(context).size.width / 2) - 60,
              top: (MediaQuery.of(context).size.height / 2) - 60,
            ),
          ],
        ),
      ),
    );
  }
}

Answer 3

您可以反转列或行的方向：这将在您传入的方向上呈现。请记住，您可能需要重新排序小部件数组 ..

Column(
      verticalDirection: VerticalDirection.up, //Override render direction
      children: [
        myWidgetB,
        myWidgetA,
      ],
    );

如何在Flutter中对行或列的后续子项进行更早的渲染？

示范

说明

3 个答案: