面试题：Flutter中Stack堆叠布局的子组件位置如何确定

Question

在Flutter的Stack堆叠布局中，阐述如何指定子组件在堆叠中的位置，比如如何使用Positioned组件来精确控制子组件的偏移量，以及如果不使用Positioned组件，子组件默认的位置规则是怎样的。

Answer 1

使用Positioned组件指定位置

1. 偏移量控制：
   • 在Flutter的Stack布局中，Positioned组件用于精确控制子组件的位置。它有left、top、right和bottom属性来指定子组件相对于Stack边界的偏移量。
   • 例如：

   Stack(
     children: [
       Positioned(
         left: 50,
         top: 100,
         child: Container(
           width: 200,
           height: 200,
           color: Colors.blue,
         ),
       ),
     ],
   );
   

   • 在上述代码中，Container组件在Stack中，从左边缘偏移50像素，从上边缘偏移100像素。

不使用Positioned组件时子组件的默认位置规则

1. 堆叠顺序：
   • 当子组件不使用Positioned组件时，它们会按照在children列表中的顺序堆叠，后添加的子组件会覆盖先添加的子组件。
   • 例如：

   Stack(
     children: [
       Container(
         width: 200,
         height: 200,
         color: Colors.blue,
       ),
       Container(
         width: 100,
         height: 100,
         color: Colors.red,
       ),
     ],
   );
   

   • 这里Colors.red的Container会覆盖Colors.blue的Container的部分区域，因为它在children列表中排在后面。
2. 位置：
   • 不使用Positioned的子组件默认会对齐Stack的左上角，且按照自身大小进行显示，不会根据父Stack大小自动调整，除非子组件本身有布局相关的设置（如Align等）。