Flutter - SizedBox

今天来学学SizedBox,它主要两个作用:

• 限制子元素控件的大小
• 设置两个控件之间的距离

class RowDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        SizedBox(
          height: 100.0,  // 高度
          width: 100.0,  // 宽度
          child: Container(
            decoration: BoxDecoration(
              color: Colors.yellow,
              borderRadius: BorderRadius.circular(8.0), // 四个角的弧度
            ),
            child: Icon(Icons.autorenew),
          ),
        ),
        SizedBox(   // 设置上下两控件的间距
          height: 100.0,
        ),
        SizedBox(
          height: 200.0,
          width: 200.0,
          child: Container(
            decoration: BoxDecoration(
              color: Colors.yellow,
              borderRadius: BorderRadius.circular(8.0),
            ),
            child: Icon(Icons.autorenew),
          ),
        )
      ],
    );
  }
}

上面代码我们可以看到第一个和第三个SizedBox限制了子元素组件Container的高度和宽度，而第二个SizedBox则是控制了第一个和第三个之间的距离为100.
效果图如下:

sizedbox.png