dart 展开列中的SingleChildScrollView，以占用所需的空间，但不能超出此范围

mbzjlibv 于 2023-09-28 发布在其他

关注(0)|答案(3)|浏览(129)

我有一个Flutter小部件，像这样，父容器中的Column内有一个SingleChildScrollView：

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(10),
      decoration: BoxDecoration(
        color: Colors.grey,
        borderRadius: BorderRadius.circular(10),
      ),
      child: const Column(
        children: [
          Text("Widget title"),
          SingleChildScrollView(
            child: Text(
              "This is a long piece of text that may or may not fit the screen\n"
              "This is a long piece of text that may or may not fit the screen\n"
              "This is a long piece of text that may or may not fit the screen\n"
              "This is a long piece of text that may or may not fit the screen\n"
              "This is a long piece of text that may or may not fit the screen\n"
              "This is a long piece of text that may or may not fit the screen\n",
            ),
          ),
        ],
      ),
    );
  }
}

我想把它嵌套在另一个列中，像这样：

Scaffold(
  appBar: ...
  body: Column(
    children: [
       Text('Short Text 1'),
       SizedBox(height: 20),
       Text('Short Text 2'),
       SizedBox(height: 20),
       MyWidget(),
       SizedBox(height: 20),
       Text('Short Text 3'),
       SizedBox(height: 20),
       Text('Short Text 4'),
    ],
  ),
)

但是，滚动视图从不滚动。当文本太长而无法容纳所有屏幕时，列的下半部分会被切断，我会得到一个溢出错误。

一些其他的答案说把MyWidget()和SingleChildScrollView()都 Package 在Expanded() s中。当文本较长时，这非常有效，但当文本较短时，我的小部件仍然会扩展以占用所有可用空间，这不是我想要的效果

有没有办法让MyWidget内部的滚动视图根据需要缩小到适合屏幕上的所有内容，并扩展到占用可用空间，但不会扩展到占用比它可以填充的更多的空间？

编辑：为了清楚起见，我希望额外的空格（如果有的话）位于列的末尾，就像没有灵活/滚动组件一样。

dart

来源：https://stackoverflow.com/questions/77070399/expand-a-singlechildscrollview-inside-a-column-to-take-up-as-much-room-as-it-nee

3条答案

按热度按时间

5uzkadbs1#

使用Flexible Package MyWidget和SingleChildScrollView，然后将MyWidget中的mainAxisSize Column设置为mainAxisSize: MainAxisSize.min，而不是默认值（MainAxisSize.max），并让Column填充剩余的空间。
用Flexible Package

Scaffold(
  appBar: ...
  body: Column(
    children: [
       Text('Short Text 1'),
       SizedBox(height: 20),
       Text('Short Text 2'),
       SizedBox(height: 20),
       // wrap with Flexible
       Flexible(child:MyWidget()),
       SizedBox(height: 20),
       Text('Short Text 3'),
       SizedBox(height: 20),
       Text('Short Text 4'),
    ],
  ),
)

将SingleChildScrollView用Flexible Package ，并将ColumnmainAxisSize设置为min，以防止Column将所有剩余空间用于短文本。

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(10),
      decoration: BoxDecoration(
        color: Colors.grey,
        borderRadius: BorderRadius.circular(10),
      ),
      child: const Column(
        // set mainAxisSize to min
        mainAxisSize: MainAxisSize.min,
        children: [
          Text("Widget title"),
          // wrap with Flexible
          Flexible(
            child: SingleChildScrollView(
              child: Text(
                "This is a long piece of text that may or may not fit the screen\n"
                    "This is a long piece of text that may or may not fit the screen\n"
                    "This is a long piece of text that may or may not fit the screen\n"
                    "This is a long piece of text that may or may not fit the screen\n"
                    "This is a long piece of text that may or may not fit the screen\n"
                    "This is a long piece of text that may or may not fit the screen\n",
              ),
            ),
          ),
        ],
      ),
    );
  }
}

对于长文本

赞(0）回复(0）举报 2023-09-28

rqqzpn5f2#

我们可以通过删除SingleChildScrollView，将Column更改为ListView，并将shrinkWrap设置为true来实现。（MyWidget）
在另一列中，只需将MyWidget Package 为Flexible
短内容
长内容
示例代码

class MyWidget extends StatelessWidget {
  const MyWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(10),
      decoration: BoxDecoration(
        color: Colors.grey,
        borderRadius: BorderRadius.circular(10),
      ),
      child: ListView(
        shrinkWrap: true,
        children: const [
          Text("Widget title"),
          Text(
            "This is a long piece of text that may or may not fit the screen\n"
            "This is a long piece of text that may or may not fit the screen\n"
            "This is a long piece of text that may or may not fit the screen\n"
            "This is a long piece of text that may or may not fit the screen\n"
            "This is a long piece of text that may or may not fit the screen\n"
            "This is a long piece of text that may or may not fit the screen\n"
            "This is a long piece of text that may or may not fit the screen\n"
            "This is a long piece of text that may or may not fit the screen\n"
            "This is a long piece of text that may or may not fit the screen\n",
          ),
        ],
      ),
    );
  }
}

Scaffold(
  appBar: ...
  body: Column(
    children: [
       Text('Short Text 1'),
       SizedBox(height: 20),
       Text('Short Text 2'),
       SizedBox(height: 20),
       Flexible( child: MyWidget()),
       SizedBox(height: 20),
       Text('Short Text 3'),
       SizedBox(height: 20),
       Text('Short Text 4'),
    ],
  ),
)

赞(0）回复(0）举报 2023-09-28

ss2ws0br3#

使用“灵活”而不是“扩展”。
与“扩展”不同，“灵活”不要求子对象填充可用空间。
https://api.flutter.dev/flutter/widgets/Flexible-class.html

赞(0）回复(0）举报 2023-09-28