子控件之间的相对布局

• 自定义ListView + separated
  

1. 相对间距设置

• 1. SizedBox(width: 20) // 设置间距为20
• 2. Spacer(), // 尽可能大的间距
• 3. mainAxisAlignment 设置对齐方式控制彼此间距
• 4. 如果不用行的话，还可以使用Wrap并指定spacing
• 5. 同样是使用Wrap，设置spaceAround
• https://www.jianshu.com/p/4dea86ea36a7
• 实现代码：

_getSliverFixedExtentListWidget(BuildContext context, int index) {
   return Container(
     decoration: BoxDecoration(
       color: Colors
           .grey[200], //index % 2 == 0 ? Colors.green[200] : Colors.green,
     ),
     child: Column(
       # mainAxisAlignment: MainAxisAlignment.center,
       children: [
         Spacer(),  # 尽可能大的间距
         Row(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
             SizedBox(width: 20),
             Icon(leftIcons[index], size: 25),
             SizedBox(width: 10),
             Text(leftTitles[index]),
             Spacer(), # 尽可能大的间距
             Icon(Icons.arrow_forward_ios, size: 15),
             SizedBox(width: 15),
           ],
         ),
         Spacer(), # 尽可能大的间距
         # 自定义分割线
         Container(
           width: MediaQuery.of(context).size.width,
           height: 1,
           color: Colors.grey[300],
         ),
       ],
     ),
   );
 }

2. 设置背景色

• 1. 包裹一层Container, 设置decoration 颜色即可

Container(
      decoration: BoxDecoration(
        color: Colors
            .grey[200], # index % 2 == 0 ? Colors.green[200] : Colors.green,
      )

[Flutter-30] 子控件之间的相对布局01