dart - 溢出的父小部件
问题描述
我正在尝试创建一个具有按钮的小部件,只要按下该按钮,就会在其下方打开一个列表,填充按钮下方的所有空间。我用一个简单的方法实现了它Column
,如下所示:
class _MyCoolWidgetState extends State<MyCoolWidget> {
...
@override
Widget build(BuildContext context) {
return new Column(
children: <Widget>[
new MyButton(...),
isPressed ? new Expanded(
child: new SizedBox(
width: MediaQuery.of(context).size.width,
child: new MyList()
)
) : new Container()
]
)
}
}
这在很多情况下都很好,但不是全部。
我在创建此小部件时遇到的问题MyCoolWidget
是,如果将 a放在 aRow
中,例如与其他小部件一起放置,比如说 other s,则列表受其所暗示MyCoolWidget
的宽度的限制。
我尝试使用 修复此问题,但不幸的是没有运气。Row
OverflowBox
这个小部件与选项卡的不同之处在于它们可以放置在小部件树中的任何位置,并且当按下按钮时,即使这意味着忽略约束,列表也会填满按钮下的所有空间。
下图代表了我要实现的目标,其中 "BUTTON1" 和 "BUTTON2" 或两者都MyCoolWidget
在 a 中Row
:
编辑:实际代码的片段
class _MyCoolWidgetState extends State<MyCoolWidget> {
bool isTapped = false;
@override
Widget build(BuildContext context) {
return new Column(
children: <Widget>[
new SizedBox(
height: 20.0,
width: 55.0,
child: new Material(
color: Colors.red,
child: new InkWell(
onTap: () => setState(() => isTapped = !isTapped),
child: new Text("Surprise"),
),
),
),
bottomList()
],
);
}
Widget comboList() {
if (isTapped) {
return new Expanded(
child: new OverflowBox(
child: new Container(
color: Colors.orange,
width: MediaQuery.of(context).size.width,
child: new ListView( // Random list
children: <Widget>[
new Text("ok"),
new Text("ok"),
new Text("ok"),
new Text("ok"),
new Text("ok"),
new Text("ok"),
new Text("ok"),
new Text("ok"),
new Text("ok"),
new Text("ok"),
new Text("ok"),
new Text("ok"),
new Text("ok"),
],
)
)
),
);
} else {
return new Container();
}
}
}
我使用它如下:
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Row(
children: <Widget>[
new Expanded(child: new MyCoolWidget()),
new Expanded(child: new MyCoolWidget()),
]
)
}
}
解决方案
从评论中可以看出,OP想要的是:
制作一个覆盖所有内容的弹出窗口,从屏幕上的按钮到屏幕底部的任何位置,同时水平填充它,无论按钮在屏幕上的哪个位置。按下按钮时,它也会切换打开/关闭。
有几种方法可以做到这一点;最基本的方法是使用 Dialog 和 showDialog,但它在 SafeArea 周围存在一些问题,这使得这变得困难。此外,OP 要求按钮切换,而不是按下对话框以外的任何位置(这是对话框所做的 - 或者阻止对话框后面的触摸)。
这是一个如何做这样的事情的工作示例。完全免责声明 - 我并不是说这是一件好事,甚至不是一个好方法……但它是一种方法。
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
// We're extending PopupRoute as it (and ModalRoute) do a lot of things
// that we don't want to have to re-create. Unfortunately ModalRoute also
// adds a modal barrier which we don't want, so we have to do a slightly messy
// workaround for that. And this has a few properties we don't really care about.
class NoBarrierPopupRoute<T> extends PopupRoute<T> {
NoBarrierPopupRoute({@required this.builder});
final WidgetBuilder builder;
@override
Color barrierColor;
@override
bool barrierDismissible = true;
@override
String barrierLabel;
@override
Widget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
return new Builder(builder: builder);
}
@override
Duration get transitionDuration => const Duration(milliseconds: 100);
@override
Iterable<OverlayEntry> createOverlayEntries() sync* {
// modalRoute creates two overlays - the modal barrier, then the
// actual one we want that displays our page. We simply don't
// return the modal barrier.
// Note that if you want a tap anywhere that isn't the dialog (list)
// to close it, then you could delete this override.
yield super.createOverlayEntries().last;
}
@override
Widget buildTransitions(
BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
// if you don't want a transition, remove this and set transitionDuration to 0.
return new FadeTransition(opacity: new CurvedAnimation(parent: animation, curve: Curves.easeOut), child: child);
}
}
class PopupButton extends StatefulWidget {
final String text;
final WidgetBuilder popupBuilder;
PopupButton({@required this.text, @required this.popupBuilder});
@override
State<StatefulWidget> createState() => PopupButtonState();
}
class PopupButtonState extends State<PopupButton> {
bool _active = false;
@override
Widget build(BuildContext context) {
return new FlatButton(
onPressed: () {
if (_active) {
Navigator.of(context).pop();
} else {
RenderBox renderbox = context.findRenderObject();
Offset globalCoord = renderbox.localToGlobal(new Offset(0.0, context.size.height));
setState(() => _active = true);
Navigator
.of(context, rootNavigator: true)
.push(
new NoBarrierPopupRoute(
builder: (context) => new Padding(
padding: new EdgeInsets.only(top: globalCoord.dy),
child: new Builder(builder: widget.popupBuilder),
),
),
)
.then((val) => setState(() => _active = false));
}
},
child: new Text(widget.text),
);
}
}
class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new SafeArea(
child: new Container(
color: Colors.white,
child: new Column(children: [
new PopupButton(
text: "one",
popupBuilder: (context) => new Container(
color: Colors.blue,
),
),
new PopupButton(
text: "two",
popupBuilder: (context) => new Container(color: Colors.red),
)
]),
),
),
);
}
}
对于更古怪的建议,您可以使用 find the location 部分并查看此答案,该答案描述了如何创建不受其父母位置约束的孩子。
但是,您最终会这样做,最好不要将列表作为按钮的直接子级,因为颤动中的很多东西取决于子级的大小,并且使其能够扩展到全屏尺寸很容易导致问题。
推荐阅读
- angular - Angular Bootstrap 弹出框自定义样式不起作用
- labview - 在网页上部署 LabVIEW VI
- c# - 如何在 C# 的同一行中打印字典键和该键的倍数值
- fullcalendar - 将您的应用日历与 google/outlook 日历同步
- jquery - 当 jQuery UI datetimepicker 关闭并且日期/时间更改时运行 AJAX
- javascript - Redux Store 未在 Chrome 扩展程序中连接
- python - 将 DataFrame 转换为对象数组
- node.js - 一个rest api可以是IP地址吗?还是必须是网址?
- javascript - 如何摆脱/覆盖剑道上的添加行弹出标题?
- javascript - 使用 js 从 html 发送数据并使用 gson 在 servlet 上发送数据