Flutter 中的 shrinkWrap 属性有啥作用？

Posted 2023-02-23

【中文标题】Flutter 中的 shrinkWrap 属性有啥作用？

【英文标题】：What does the shrinkWrap property do in Flutter?Flutter 中的 shrinkWrap 属性有什么作用？

【发布时间】：2019-05-29 03:28:00

【问题描述】：

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

【问题讨论】：

你能详细说明你在docs.flutter.io/flutter/widgets/ScrollView/shrinkWrap.html中缺少什么

@GünterZöchbauer 可能我很笨，但是当我读到那个解释时我什么都不懂:)

@GünterZöchbauer 提供的链接不再有效。我相信这是他们试图链接到的更新版本。 api.flutter.dev/flutter/widgets/ScrollView/shrinkWrap.html

【参考方案1】：

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

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

【参考方案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 中使用它：当只有几个项目时，使对话框尽可能小。当项目很多时，填充屏幕高度并使列表可滚动：

【讨论】：

精美解释，文档说，“收缩包裹滚动视图的内容比扩展到最大允许大小要昂贵得多，因为内容可以在滚动过程中扩展和收缩，这意味着每当滚动位置发生变化时，都需要重新计算滚动视图。”所以必须尝试使用​​Expanded 而不是shrinkWrap 对吧？

可爱的解释，谢谢

【参考方案3】：

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

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

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

如果 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 大小相同。 [收缩包装：真]。 否则会给出未绑定高度运行时异常

【参考方案4】：

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

materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,