SingleChildScrollView内侧行
SingleChildScrollView内侧行
提问于 2019-07-29 16:32:20
我有一个由列组成的布局，其中一个元素是行(这样它就占据了整个屏幕的宽度)。在这一行中，我有一个包装，它的内容非常大，我想把它放到一个SingleChildScrollView中。
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
padding: const EdgeInsets.all(kPaddingMainContainer),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Title', style: Theme.of(context).textTheme.title)
],
),
Padding(
padding: const EdgeInsets.only(top: 10),
),
Row(
children: <Widget>[
Expanded(
child: SingleChildScrollView(
child: Wrap(
alignment: WrapAlignment.center,
runSpacing: 20.0, // distance between rows
spacing: 30.0, // distance between chips
children: _getWidgets(),
),
),
),
],
),
],
),
),
),
);
}使用这段代码，我不能让SingleChildScrollView使包装可滚动。相反，我得到了一个RenderFlex溢出错误。
但是，如果我从Row提取包装，如下所示：
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
padding: const EdgeInsets.all(kPaddingMainContainer),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Title', style: Theme.of(context).textTheme.title)
],
),
Padding(
padding: const EdgeInsets.only(top: 10),
),
Expanded(
child: SingleChildScrollView(
child: Wrap(
alignment: WrapAlignment.center,
runSpacing: 20.0, // distance between rows
spacing: 30.0, // distance between chips
children: _getWidgets(),
),
),
),
]),
),
),
);
}然后，卷轴开始工作了。
然而，现在包装不再扩展到全宽，这是我想要的。
如何在行中使用SingleChildScrollView？
PS:我不想在SingleChildScrollView中包装列，因为我希望我的标题保持不变，只想滚动下面的包装。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-07-30 14:45:42
我找到了一个解决方案，将Wrap包装在minWidth为屏幕宽度的ConstrainedBox中(而不是一行)。
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
padding: const EdgeInsets.all(kPaddingMainContainer),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Title', style: Theme.of(context).textTheme.title)
],
),
Padding(
padding: const EdgeInsets.only(top: 10),
),
Expanded(
child: SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: MediaQuery.of(context).size.width,
),
child: Wrap(
alignment: WrapAlignment.center,
runSpacing: 20.0, // distance between rows
spacing: 30.0, // distance between chips
children: _getWidgets(),
),
),
),
),
]),
),
),
);
}这解决了我的问题，我现在只能通过点击屏幕上的任何地方来滚动Wrap小部件，而标题的第一行保持不变。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57249935
复制相关文章
相似问题
腾讯云开发者
