flutter - 如何左右移动小部件直到可用空间被填满？

Question

我是初学者，还在学习flutter，如果这里有问题，请原谅我。

所以我有一个堆栈，里面有 2 个小部件。小部件 1 和小部件 2。我想将小部件 B 放在小部件 A 的正下方。

注意：小部件 2 比小部件 1 大。

 class MyWidgets extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Stack(
       children: <Widget>[
         Widget1,
         Positioned(
           top: widget1PositionFromTop + widget1Size,
           left: widget1PositionFromLeft,
           child: FractionalTranslation(
             translation: Offset(-0.5, 0.0),
             child: Widget2,
           ),
         )
       ],

     );
   }
 }

问题是，如果 Widget1 的左起位置为 0，或者小于 Widget2 大小的一半，则 Widget2 溢出，只能看到 Widget2 的一半或一部分。

我想知道只要有空间，我怎么能只翻译它的位置，我的意思是如果只剩下 0.3 的 Widget2 空间，那么它只会移动 -0.3 而不是 -0.5 ..

谢谢你。

标签： flutterdartflutter-layout

Answer 1

如果你想要这个使用Stack然后

class SO extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Stack(
        alignment: Alignment.bottomCenter,
        children: <Widget>[
          Container(width: 200, height: 200, color: Colors.red),
          Container(width: 100, height: 100, color: Colors.blue),
        ],
      ),
    );
  }
}

这使

---

也许你可以使用Column喜欢

class SO extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Container(width: 200, height: 200, color: Colors.red),
          Container(width: 100, height: 100, color: Colors.blue),
        ],
      ),
    );
  }
}

最终结果为