Flutter 中的 shrinkWrap 属性有什么作用？

Question

我是 Flutter 的新手，非常渴望学习这项技术。我无法理解ListView 中shrinkWrap 属性的工作。我听不懂Flutter documentation。

Answer 1

如果您不设置shrinkWrap 属性，您的ListView 将与其父级一样大。

如果您将其设置为true，则列表将包装其内容并与子级允许的一样大。

Answer 2

通常ListView（以及GridView、PageView 和CustomScrollView）会尝试填充父元素提供的所有可用空间，即使列表项需要更少的空间。

使用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')),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

shrinkWrap: false:

shrinkWrap: true:

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

Answer 3

每个 ScrollView（ListView、GridView、CustomScrollView）都有一个 shrinkWrap 属性，用于确定 scrollDirection 的大小。

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

1. 尺寸与父尺寸相同。
2. 与内容大小相同（所有子大小）。

如果 ScrollView 的 shrinkWrap : false ，则 ScrollView 的 scrollDirection 尺寸与父尺寸相同。

如果 ScrollView 的 shrinkWrap : true ，则 ScrollView 的 scrollDirection 尺寸与 Content 尺寸相同（所有子尺寸）。

但是为什么 ScrollView scrollDirection 需要在这 02 种尺寸之间切换？？？

原因是 ScrollView 的父约束。

• 如果 ScrollView 的父级给出 Tight 或 Loose 约束，则 ScrollView 的 scrollDirection 大小与其父级大小相同。 [shrinkWrap : false]。
• 如果 ScrollView 的父级给出 Unbound constraint ，那么您的 ScrollView 的 scrollDirection 大小必须与其 Content 大小相同。 [收缩包装：真]。 否则会给出未绑定高度运行时异常

Answer 4

顺便说一句，您可以将此属性添加到其他小部件（例如 RisedButton）中，以将点击目标大小缩小到 Material 规范提供的最小值。

materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,