Dart 如何在flatter中呈现行或列的早期子元素？ 示范

解释 想象一个

小部件

树，在

行

中有一个水平的（参考

方向

参数）

可解除

，或者在

列

中有一个垂直的

可解除

在这两种情况下，都被另外两个

小部件所包围

以下是两种情况：

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

您可以结合Stack widget和Posited widget的强大功能来实现您想要的：）

在下面的示例中，Dismissible位于其他两个小部件之上：

导入“包装：颤振/材料.省道”；
void main（）=>runApp（新的MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“我的布局”，
主题：主题数据(
主样本：颜色。蓝色，
),
主页：DismissibleDemo（），
);
}
}
类DismissibleDemo扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
归还新脚手架(
正文：安全区(
子：堆栈(
fit:StackFit.expand，
儿童：[
新定位(
子：容器(
装饰：盒子装饰(
颜色：Colors.redAccent，
形状：BoxShape.circle，
),
高度：100.0，
宽度：100.0，
),
左：0.0，
顶部：（MediaQuery.of（context.size.height/2）-50），
新定位(
子：容器(
装饰：盒子装饰(
颜色：Colors.redAccent，
形状：BoxShape.circle，
),
),
高度：100.0，
宽度：100.0，
右：0.0，
顶部：（MediaQuery.of（context.size.height/2）-50），
新定位(
孩子：可鄙(
key:ObjectKey（0），
方向：DismissDirection.horizontal，
子：容器(
身高：120.0，
宽度：120.0，
装饰：盒子装饰(
颜色：颜色。琥珀色，
形状：BoxShape.circle，
),
),
),
左：（MediaQuery.of（context.size.width/2）-60，
顶部：（MediaQuery.of（context.size.height/2）-60，
),
],
),
),
);
}
}
经过进一步的修补，我得到了令人满意的结果。我使用了
堆栈
，但仅从我的
行
中删除了
可驳回的

对于我问题中的示例代码，它如下所示：

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

导入“包装：颤振/材料.省道”；
void main（）=>runApp(
材料聚丙烯(
家：脚手架(
正文：安全区(
子：堆栈(
儿童：[
划船(
儿童：[
扩大(
儿童：中心(
子：容器(
装饰：盒子装饰(
颜色：Colors.redAccent，
形状：BoxShape.circle，
),
),
),
),
扩大(
子级：容器（），
),
扩大(
儿童：中心(
子：容器(
装饰：盒子装饰(
颜色：Colors.redAccent，
形状：BoxShape.circle，
),
),
),
),
],
),
居中(
孩子：可鄙(
key:ObjectKey（0），
方向：DismissDirection.horizontal，
子：容器(
高度：150.0，
宽度：150.0，
装饰：盒子装饰(
颜色：颜色。琥珀色，
形状：BoxShape.circle，
),
),
),
),
],
),
),
),
),
);

本质上，我用一个
堆栈
，将
行
中的
可解除
替换为另一个
扩展的
，然后将
可解除
放在
堆栈
中的
中间
可以反转列或行的方向：
这将沿您传入的方向渲染。请记住，您可能需要对小部件数组进行重新排序

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

这种方法完全减少了我所需要的
行
/
列
。我的示例代码是一个非常简单的案例，但我无法将其实现到稍微复杂/灵活的树中：（简言之，我有点依赖于
行
/
列
的位置和大小，只想更改一个特定项的呈现顺序。不确定您的意思。每个小部件都有其用例。您的树有多复杂/灵活？：）我将尝试在我的
堆栈中对其进行更多的调整，但这绝对不是一个好的解决方案。好的。请将您的好解决方案与行/列共享。谢谢您会很高兴找到一个，因此我问。很高兴知道您很满意。最后您必须使用堆栈。老实说，我认为这不是一个更好的解决方案。祝贺您！@PhucT对不起，我不能完全理解你的意思。你说“最终”和“更好的解决方案”是什么意思？别担心。我以为你只想使用列/行作为你对m的评论
Column(
      verticalDirection: VerticalDirection.up, //Override render direction
      children: [
        myWidgetB,
        myWidgetA,
      ],
    );