dart - 如何在 Flutter 中渲染 Row 或 Column 的后续子级?
问题描述
示范
解释
想象一Widget
棵树,在 a 中具有水平(参考direction
参数)或Dismissible
在 a 中具有垂直。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
但不会在另一个方向上。
如何在 a or中Dismissible
渲染我的下面所有的孩子, 反之亦然?Widget
Row
Column
在标题中,我谈到了“后来”和“早期”。我的意思是它们出现的顺序,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,
),
),
),
],
),
),
),
),
);
解决方案
经过更多的修补,我得到了令人满意的结果。我使用了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 theRow
Expanded
,然后将 a 放在Dismissible
了Stack
里面Center
。
推荐阅读
- javascript - 在 GET 调用中使用 isomorphic-fetch 时基本身份验证无法正常工作
- jenkins - 使用 ELK 从日志中获取 Jenkins 构建数据
- java - 如何根据Apache POI中另一个单元格中的值禁用单元格中的编辑?
- javascript - 如何使用 orgChart 添加孩子?
- java - 升级到新的 Jenkins 版本后,构建失败
- javascript - react window.onload上的浏览器兼容性问题?
- java - JAX-RS中POST请求中对象内的映射集合
- java - 有什么方法可以猜测 MD5 hashkey 生成的值吗?
- symfony - Symfony 4:未捕获的 RuntimeException:未定义 APP_ENV 环境变量
- angular - Angular 5 表过滤