Row 内的 SingleChildScrollView

Question

我有一个由列组成的布局，其中一个元素是一行（以便它占据屏幕的整个宽度）。在该行中，我有一个换行符，其内容相当大，我想将其放入 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 溢出错误。

但是，如果我从行中提取换行，如下所示：

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

然后，卷轴就开始工作了。

然而，现在包裹不再扩展到全宽，这正是我想要的。

如何在 Row 中使用 SingleChildScrollView ？

PS：我不想将 Column 包裹在 SingleChildScrollView 中，因为我希望标题保持固定，只有下面的包裹滚动。

Answer 1

我找到了一个解决方案，将 Wrap 包装在 ConstrainedBox（而不是一行）中，其中 minWidth 是屏幕的宽度。

@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 小部件，而标题的第一行保持固定。