首页 文章

根据另一个小部件的位置/大小定位/调整小部件的大小

提问于
浏览
4

我曾经在Flutter面对过一段相当大的墙 . 动画或构建小部件,取决于其他小部件以获取其大小/位置 .

可能是我最糟糕的噩梦的几个例子:动态地 grab 小部件彼此相邻 . 在CSS中我们有这个:

.root {
    display: flex;
    background: grey;
    padding: 4px;
}
.root > div {
  background: lightgrey;
  margin-right: 5px;
  padding: 5px;
}
<div class="root">
    <div>
         dynamic height
         
dynamic width
fat
super fat </div> <div> dynamic width
dynamic height </div> </div>
  • 父级采用全宽(不重要) .

  • 父母占据最大孩子的身高 .

  • 具有较小高度的儿童伸展以适合父母

  • 孩子们彼此相邻

在颤动中,我认为我们不能同时获得所有4分 .

现在如果我们有2个这样的列表和一个动画,其中一个元素从一个列表到另一个列表怎么办?例

enter image description here

enter image description here

另一个例子 . 如果我们想让 SlideTransition 与另一个没有共同点的小部件垂直对齐怎么办?像这样 :

enter image description here

这些是完全随机的例子 . 我不需要重现完全相同的东西 . 这里真正的问题是:是否有一种通用的方法来做类似的事情(获取屏幕尺寸/位置)?这个用例不具体的东西,以后可以轻松维护吗?

1 回答

  • 3

    要回答原始布局问题,可以使用IntrinsicHeight小部件和 CrossAxisAlignment.stretch 来完成此布局 . 它看起来像这样:

    screenshot

    这是代码:

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(new MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return new MaterialApp(
          home: new MyHomePage(),
        );
      }
    }
    
    class MyHomePage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          body: new Padding(
            padding: new EdgeInsets.all(10.0),
            child: new IntrinsicHeight(
              child: new Container(
                color: Colors.grey,
                padding: new EdgeInsets.all(4.0),
                child: new Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    new Container(
                      padding: new EdgeInsets.all(5.0),
                      margin: new EdgeInsets.only(right: 5.0),
                      color: Colors.grey[200],
                      child: new Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          new Text('dynamic height'),
                          new Text('dynamic width'),
                          new Text('fat'),
                          new Text('super fat'),
                        ],
                      ),
                    ),
                    new Container(
                      padding: new EdgeInsets.all(5.0),
                      color: Colors.grey[200],
                      child: new Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          new Text('dynamic width'),
                          new Text('dynamic height'),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      }
    }
    

    要实现更高级的动画示例,我建议使用CustomMultiChildLayout来定位框 . 有关使用此类的高级动画示例,请参阅图库的animation demo

    screenshot

相关问题