收缩包装属性在颤动中起什么作用?

Har*_*pta 11 flutter

我是Flutter的新手,非常渴望学习这项技术.我无法理解列表视图中收缩包装属性的工作.我无法理解颤动的文档.有人可以帮忙吗?提前致谢.

bof*_*mer 26

通常a ListView(以及GridView,PageViewCustomScrollView)尝试填充父元素给出的所有可用空间,即使列表项需要较少的空间也是如此.

使用shrinkWrap: true,您可以更改此行为,以便ListView仅占用所需的空间(当有更多项目时它仍将滚动).

看看这个例子:

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Center(
          child: Container(
            margin: EdgeInsets.all(32),
            decoration: BoxDecoration(border: Border.all(color: Colors.red)),
            child: ListView(
              shrinkWrap: false,
              children: <Widget>[
                ListTile(title: Text('Item 1')),
                ListTile(title: Text('Item 2')),
                ListTile(title: Text('Item 3')),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

shrinkWrap: false:

没有shrinkWrap

shrinkWrap: true:

与shrinkWrap

您可以在AlertDialogs中使用它:当只有几个项目时,使对话框尽可能小.当有很多项目时,填充屏幕高度并使列表可滚动:

对话

对话

  • 文档解释得很漂亮,“收缩包裹滚动视图的内容比扩展到允许的最大大小要昂贵得多,因为内容可以在滚动过程中扩展和收缩,这意味着无论何时都需要重新计算滚动视图的大小滚动位置发生变化。” 因此,必须尝试使用​​“Expanded”而不是“shrinkWrap”,对吗? (6认同)
  • 我第二个@theredcap 问题是关于使用 `shrinkWrap: true` 的替代方案 - 是否有任何适当的解决方法? (2认同)

Dan*_*ira 23

如果您设置该shrinkWrap属性,您ListView将与它的父级一样大。

如果您将其设置为true,则该列表将包装其内容,并尽可能大到孩子允许的大小。


Dil*_*han 12

每个ScrollView(ListView、GridView、CustomScrollView)都有一个shrinkWrap属性来确定scrollDirection的大小。

所以ScrollView的scrollDirection可以有02种尺寸。

  1. 尺寸与父尺寸相同。
  2. 大小与内容大小相同(所有子项大小)。

如果ScrollView的shrinkWrap: false,则ScrollView的scrollDirection大小与父级大小相同

如果ScrollView的shrinkWrap:true,则ScrollView的scrollDirection大小与内容大小(所有子项大小)相同

但是为什么ScrollView的scrollDirection需要在这02个尺寸之间切换???

原因是ScrollView的父级约束。

  • 如果 ScrollView 的父级给出严格或宽松约束,那么您的 ScrollView 的scrollDirection 大小与其父级大小相同。[shrinkWrap:假]。
  • 如果 ScrollView 的父级给出了Unbound 约束,那么您的 ScrollView 的scrollDirection 大小必须与其 Content 大小相同。[shrinkWrap:真]。否则会给出未绑定高度运行时异常