繁体   English   中英

如何获取父级动画值的子小部件大小

How to get child widget size for animation values in parent

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

虽然颤振正在增长,但有很多建议和“方法”。 我不确定什么是正确的,因为我对框架真的很陌生。

说,我有以下代码(几乎没有减少):

@override
Widget build(BuildContext context) {
  return GestureDetector(
    // heights are needed here for animation values
      child: Stack(
    children: <Widget>[
      Positioned(
        left: 0,
        right: 0,
        bottom: value,
        child: Column( // overall height
          children: <Widget>[
            Container(height: 60),  // 1
            Container(height: 150), // 2
            Container(height: 200),
          ],
        ),
      ),
    ],
  ));
}

GestureDetector我根据其子项的不同高度为一些小部件动作设置动画。

孩子的height //1//2 (和第三个)将在开发时硬编码,但是,因为有几个这样的元素和自定义小部件,我想自动获取它们。 稍后,这总体上更易于维护,因为大多数地方的每个小部件都有一些动画。

所以,我可以使用GlobalKey ,或者BoxConstraints ,但是 - 总而言之 - 如果构建为自定义小部件,最便宜的方法是什么?

结束这个问题:在GestureDetector我能够在初始布局完成后和每次重建后重建。

我只是不确定哪种方式安全且成本最低(在代码中多次使用这些小部件)。

关于//1//2//1是初始动画begin:值, //2是中间停止的值, // overall height是动画end:值。 只是为了解释。

至少:我在所有这些中都使用了states_rebuilder

2 个回复

我们只能在渲染后获取小部件的大小,除非它是一个常量。 我们可以使用 ValueNotifier 在渲染后发送孩子的大小。

这是它的完整示例。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ValueNotifier<Size> _size = ValueNotifier<Size>(Size(0, 0));

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("example")
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ValueListenableBuilder(
              builder: (BuildContext context, Size value, Widget child) {
                return Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    Text('Height of the child: ${value.height}'),
                    Text('Width of the child: ${value.width}'),
                    SizeTrackingWidget(
                      child: Container(
                        height: MediaQuery.of(context).size.width*0.4,
                        width:  MediaQuery.of(context).size.width*0.3,
                        color: Colors.red
                      ),
                      sizeValueNotifier: _size,
                    )
                  ],
                );
              },
              valueListenable: _size,
              child: null,
            )
          ],
        ),
      ),
    );
  }
}


class SizeTrackingWidget extends StatefulWidget {
  Widget child;
  ValueNotifier<Size> sizeValueNotifier;
  SizeTrackingWidget({Key key, @required this.sizeValueNotifier, @required this.child}) : super(key: key);
  @override
  _SizeTrackingWidgetState createState() => _SizeTrackingWidgetState();
}

class _SizeTrackingWidgetState extends State<SizeTrackingWidget> {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_){
      _getSize();
    });
  }

  _getSize() {
    RenderBox renderBox = context.findRenderObject();
    widget.sizeValueNotifier.value = renderBox.size;
  }

  @override
  Widget build(BuildContext context) {
    return widget.child;
  }
}

受到@Thang Mai 的公认答案的启发,我做了一个类似的无状态解决方案:

class ChildSizeNotifier extends StatelessWidget {
  final ValueNotifier<Size> notifier = ValueNotifier(const Size(0, 0));
  final Widget Function(BuildContext context, Size size, Widget child) builder;
  final Widget child;
  UjChildSizeNotifier({
    Key key,
    @required this.builder,
    this.child,
  }) : super(key: key) {}

  @override
  Widget build(BuildContext context) {
    WidgetsBinding.instance.addPostFrameCallback(
      (_) {
        notifier.value = (context.findRenderObject() as RenderBox).size;
      },
    );
    return ValueListenableBuilder(
      valueListenable: notifier,
      builder: builder,
      child: child,
    );
  }
}

像这样使用它

ChildSizeNotifier(
  builder: (context, size, child) {
    // size is the size of the text
    return Text(size.height > 50 ? 'big' : 'small');
  },
)
1 PyQt-将父小部件的大小调整为其子级

只是其中带有选项卡小部件的主小部件。 问题是-当我运行它时,仅显示部分选项卡(如所附图片所示)。 因此,您需要调整大小或滚动选项卡以获取最后一个。 如何设置它,以便窗口从一开始就显示所有选项卡? 如何调整所有标签的大小? 问题出在哪里-它是父窗口小部件,选项卡还是vb ...

2 从其有状态的父级修改有状态的子小部件中的值

我有两个小部件。 两者都是有状态的小部件。我在主页小部件中放置了一个按钮和子小部件。 当单击 HomePage 小部件中的按钮时,我想从 HomePage 小部件更改 Child 小部件中的计数器变量。 我应该为此使用 setState 方法,但我不能从 Child 小部件外部调用它。这样做的正确方 ...

3 如何在Qt5中调整父级大小后调整方形子级小部件的大小?

我想做带有方形小部件的板。 当我运行代码时,它会创建漂亮的电路板,但调整大小后它看起来很难看。 我正在尝试使用 resize Event 调整它的大小,但它存在(可能是一些错误)。 我不知道如何在调整父母大小后调整孩子的大小。 儿童小部件必须是正方形,所以这也是问题,因为我不能使用自动展开。 也许 ...

4 如何根据父级的大小布局小部件?

假设您有一个可能具有可变大小的父小部件。 例如: 也许你想让父容器的子容器根据给定的大小呈现不同的东西。 想想响应式设计断点,如果宽度超过 X 使用此布局,如果宽度低于 X 使用该布局。 在 Flutter 中执行此操作的最佳方法是什么? ...

5 根据父级大小按比例缩小小部件中的所有子级

在 Flutter 中,我正在实现“什么是新的”屏幕,它将显示应用程序中真实屏幕的预览。 为此,我在“新增功能”流程中重用了屏幕Widgets 。 预览将显示在一个较小的Container而不是覆盖整个屏幕。 我想缩小文本大小,行高,等这个范围内所有小Container ,以匹配更小的范围。 有没 ...

7 从小部件获取表单父级

给定一个dojo输入窗口小部件(任何表单窗口小部件),获取窗口小部件的表单元素的最佳方法是什么? 即父元素。 即我正在寻找完成这样的功能: 谢谢 ...

8 防止父级剪切绝对定位的子级小部件

我正在尝试创建一个存在一行的布局,并且该行应包含一个绝对定位的按钮,该按钮应放置在该行的外部。 这是简单的架构 我只是通过将子按钮推到父按钮(我不确定这是否是正确的解决方案)并将其移动到某个绝对坐标来做到这一点。 它可以工作,但是不幸的是,子按钮被父按钮裁剪。 所以就像ov ...

9 处理父级和子级小部件的触摸事件

有两个小部件-父(主窗口)和子(弹出菜单): 默认情况下,菜单是隐藏的。 触摸主窗口区域时应显示菜单。 使用QEvent.TouchBegin可以轻松解决此任务: def eventFilter(self,obj,event):if event.type()== QEvent.TouchB ...

10 Angular 2:通过父级绑定2个子级小部件

我的问题是关于通过父代绑定2个子窗口小部件的问题。 我在父组件中有一个带有EventEmitter的图表和一个带有EventEmitter的表。 想法是在鼠标悬停在桌上的图表上突出显示该扇区。 当我像下面那样绑定它们时,在父级上使用额外的EventEmitter,我的图表会收到太 ...

2018-08-30 18:16:30 1 18   angular
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM