如何获取 child 小部件的大小
How to get size of a child Widget
我有一个特殊要求允许 header 小部件,通常包含显示在滚动视图顶部的静态内容。滚动视图应该与 header 小部件重叠,以便可以使用剪辑形状来产生效果。我通过使用带有 header 小部件的堆栈视图作为堆栈中的第一项,将滚动视图作为顶部元素来实现这种效果。滚动视图包含一列,第一个 child 是所需高度的空容器(header 小部件的高度减去重叠量)。这在将已知高度作为 hard-coded 参数传递时达到了预期的效果。 (注意:我尝试使用 Sliver List 来完成此操作,但无法实现所需的重叠以满足产品要求。)
header 小部件包含通过 API 响应加载的图像。图像的高度可能会有所不同,因此我需要在运行时确定它并相应地调整 UI。我认为这不是一项艰巨的任务,但到目前为止,我还没有找到一种方法来做到这一点。以下两张图片显示了所需的效果,右边的图片显示了向上滚动时的正确行为。请注意,滚动视图必须与 header 图像重叠,重叠量与剪辑的半径相同。
这将生成列表。 _getComponents
为 SingleChildScrollView 中包含的列提供 child 个小部件:
List<Widget> _getComponents(List<Section> sections, BuildContext context, double? height) {
List<Widget> widgetList = [
Container(height: 225) // need to obtain correct height here
];
for (int i = 1; i < sections.length; i++) {
Section section = sections[i];
if (section.model != null) {
switch (section.code) {
case mediaTypeCode:
if (section.model.runtimeType == MediaModel) {
widgetList.add(HeaderComponent(section: section));
}
break;
case articleTypeCode:
if (section.model.runtimeType == ArticleSectionModel) {
widgetList.add(TitleContentHeader(
model: section.model as ArticleSectionModel));
}
break;
}
}
}
return widgetList;
}
然后在我的视图小部件中,堆栈构建如下:
return Container(
color: Colors.white,
child: Stack(
children: [
_getHeader(sections),
SingleChildScrollView(
child: Column(
children: _getComponents(sections!, context, null),
),
),
],
),
);
我需要能够获取 _getHeader(sections)
中返回的 header 的高度并将其传递给 _getComponents
函数,以便我可以确定正确的起始位置滚动视图。
任何人都可以提供任何见解吗?
或者,您能否推荐一个允许上图中显示的行为的插件?上面说了Sliver List没有达到预期的效果
谢谢!
您可以使用 RenderBox
获取小部件的大小:
import 'package:flutter/material.dart';
class WidgetPosition {
getSizes(GlobalKey key) {
final RenderBox renderBoxRed = key.currentContext.findRenderObject();
final sizeRed = renderBoxRed.size;
// print("SIZE: $sizeRed");
return [sizeRed.width, sizeRed.height];
}
getPositions(GlobalKey key) {
final RenderBox renderBoxRed = key.currentContext.findRenderObject();
final positionRed = renderBoxRed.localToGlobal(Offset.zero);
// print("POSITION: $positionRed ");
return [positionRed.dx, positionRed.dy];
}
}
我有一个特殊要求允许 header 小部件,通常包含显示在滚动视图顶部的静态内容。滚动视图应该与 header 小部件重叠,以便可以使用剪辑形状来产生效果。我通过使用带有 header 小部件的堆栈视图作为堆栈中的第一项,将滚动视图作为顶部元素来实现这种效果。滚动视图包含一列,第一个 child 是所需高度的空容器(header 小部件的高度减去重叠量)。这在将已知高度作为 hard-coded 参数传递时达到了预期的效果。 (注意:我尝试使用 Sliver List 来完成此操作,但无法实现所需的重叠以满足产品要求。)
header 小部件包含通过 API 响应加载的图像。图像的高度可能会有所不同,因此我需要在运行时确定它并相应地调整 UI。我认为这不是一项艰巨的任务,但到目前为止,我还没有找到一种方法来做到这一点。以下两张图片显示了所需的效果,右边的图片显示了向上滚动时的正确行为。请注意,滚动视图必须与 header 图像重叠,重叠量与剪辑的半径相同。
这将生成列表。 _getComponents
为 SingleChildScrollView 中包含的列提供 child 个小部件:
List<Widget> _getComponents(List<Section> sections, BuildContext context, double? height) {
List<Widget> widgetList = [
Container(height: 225) // need to obtain correct height here
];
for (int i = 1; i < sections.length; i++) {
Section section = sections[i];
if (section.model != null) {
switch (section.code) {
case mediaTypeCode:
if (section.model.runtimeType == MediaModel) {
widgetList.add(HeaderComponent(section: section));
}
break;
case articleTypeCode:
if (section.model.runtimeType == ArticleSectionModel) {
widgetList.add(TitleContentHeader(
model: section.model as ArticleSectionModel));
}
break;
}
}
}
return widgetList;
}
然后在我的视图小部件中,堆栈构建如下:
return Container(
color: Colors.white,
child: Stack(
children: [
_getHeader(sections),
SingleChildScrollView(
child: Column(
children: _getComponents(sections!, context, null),
),
),
],
),
);
我需要能够获取 _getHeader(sections)
中返回的 header 的高度并将其传递给 _getComponents
函数,以便我可以确定正确的起始位置滚动视图。
任何人都可以提供任何见解吗?
或者,您能否推荐一个允许上图中显示的行为的插件?上面说了Sliver List没有达到预期的效果
谢谢!
您可以使用 RenderBox
获取小部件的大小:
import 'package:flutter/material.dart';
class WidgetPosition {
getSizes(GlobalKey key) {
final RenderBox renderBoxRed = key.currentContext.findRenderObject();
final sizeRed = renderBoxRed.size;
// print("SIZE: $sizeRed");
return [sizeRed.width, sizeRed.height];
}
getPositions(GlobalKey key) {
final RenderBox renderBoxRed = key.currentContext.findRenderObject();
final positionRed = renderBoxRed.localToGlobal(Offset.zero);
// print("POSITION: $positionRed ");
return [positionRed.dx, positionRed.dy];
}
}