Я пытаюсь создать виджет, в котором есть кнопка, и всякий раз, когда эта кнопка нажимается, под ней открывается список, заполняющий все пространство под кнопкой.Я реализовал это с помощью простого 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
находится внутри Row
, например, с другими виджетами, скажем, другие MyCoolWidget
s,список ограничен шириной, которую подразумевает Row
.
Я попытался исправить это с помощью OverflowBox
, но, к сожалению, безуспешно.
Этот виджет отличается от вкладок в том смысле, чточто они могут быть размещены в любом месте дерева виджетов, и когда кнопка будет нажата, список заполнит все пространство под кнопкой, даже если это будет означать пренебрежение ограничениями.
Следующее изображение представляет собой то, что япытаюсь добиться, в котором "BUTTON1" и "BUTTON2" или оба MyCoolWidget
s в 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()),
]
)
}
}
Вот скриншот того, что код на самом деле делает: