【问题标题】:Flutter, Access the padding value of parent container widgetFlutter,访问父容器widget的padding值
【发布时间】:2021-01-27 01:32:12
【问题描述】:

我有一个 GridView 小部件嵌套在一个 SizedBox 小部件内,该小部件嵌套在一个容器小部件内

    Container(
      padding: EdgeInsets.all(10),
      alignment: Alignment(0, 0),
      child: SizedBox(
        width: min(MediaQuery.of(context).size.width,
                MediaQuery.of(context).size.height) -
            20,
        height: min(MediaQuery.of(context).size.width,
                MediaQuery.of(context).size.height) -
            20,
        child: GridView.count(
          padding: EdgeInsets.all(0),
          crossAxisCount: sqrt(tiles.length).round(),
          mainAxisSpacing: 5,
          crossAxisSpacing: 5,
          children: tiles,
          shrinkWrap: true,
        ),
      ),
    ),

Container Widget 的边缘插入为 10,因此在 SizedBox 中,我希望宽度和高度为最小屏幕宽度/高度减去该边缘插入(所以减去 20,因为它在每一侧)。

如何读取父窗口小部件的值以便知道它是 edgeInset? MediaQuery 可以通过上下文来完成吗?

我知道我可以早先将边缘插图存储为变量并在两个地方都使用它,但是当我尝试学习 Flutter 时,我更好奇是否有办法读取父级的值/属性小部件,以便他们的孩子可以随时引用它们。

【问题讨论】:

    标签: flutter dart


    【解决方案1】:

    如果你为一些 Widget 提供一个全局键

    最终_key = GlobalKey();

    Table(
       key: _key,
       children: _getTableRows(),
    );
    

    然后你可以像这样计算小部件的大小:

    void _getSize(_) {
    final RenderBox _boardRender = _key.currentContext.findRenderObject();
    final boardSize = MediaQuery.of(_key.currentContext).size;
    final boardOffset = _boardRender.localToGlobal(Offset.zero);
    
    //print('$boardSize:$boardOffset:$cellSize');
    

    }

    你可以看看https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html

    【讨论】:

    • 这很完美,我假设 GlobalKey() 只是在我每次使用它时生成一个唯一标识符?
    【解决方案2】:

    Container 的行为有些复杂,因此您的问题的答案取决于container 的父级是谁。 From the documentation:

    容器尝试,以便:遵守对齐,根据子项调整自身大小,遵守宽度、高度和约束,扩展以适应父项,尽可能小。

    例如:如果您将容器放在Scaffoldbody 参数中并删除SizedBox,则GridView 将填满屏幕并具有您指定的填充。 (在这种情况下,您甚至不需要 Container,而只需使用 Padding 小部件。)

    更广泛地说,Flutter 工作在不同的范例中,您无需“了解”父级的细节,因为您可以将任何小部件放置在任何其他小部件中。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-01-14
      • 2021-08-09
      • 1970-01-01
      • 2021-03-11
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-06-14
      相关资源
      最近更新 更多