行内的SingleChildScrollView [英] SingleChildScrollView inside Row

问题描述

我有一个由列组成的布局，其元素之一是一行(因此它占据了屏幕的整个宽度).在该行中，我有一个包装，内容非常大，我想将其放入SingleChildScrollView中.

I have a layout made of a Column, one of its elements being a row (so that it takes the full width of the screen). Inside that row, I have a wrap, which content is pretty big and that I want to put inside a 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溢出错误.

With this code, I can't get the SingleChildScrollView to make the wrap scrollable. Instead, I got a RenderFlex overflowed error.

但是，如果我从行中提取包装，如下所示:

However, if I extract the wrap from the Row, as follow:

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

然后，滚动条开始工作.

Then, the scroll is working.

但是，我想要的包裹现在不再扩展到全宽了.

However, now the wrap doesn't expand to full width anymore, what I want.

如何在行内使用SingleChildScrollView?

How to use the SingleChildScrollView inside a Row ?

PS:我不想将列包装在SingleChildScrollView中，因为我希望标题保持固定，而只滚动下面的包装.

PS: I don't want to wrap the Column in a SingleChildScrollView as I want my title to stay fixed and only the wrap below to scroll.

推荐答案

我找到了一个解决方案，方法是将Wrap包装在ConsWidthedBox(而不是一行)中，该容器的minWidth是屏幕的宽度.

I found a solution by wrapping the Wrap in a ConstrainedBox (instead of a row) for which the minWidth is the width of the screen.

@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小部件，而标题的第一行保持不变.

This fixed my issue and I can now scroll the Wrap widget only by tapping anywhere on the screen, while the first row with the title stays fixed.

这篇关于行内的SingleChildScrollView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！