Flutter布局-Padding组件

Flutter中很多Widget是没有padding属性的。这个时候我们可以用Padding组件处理容器和子元素之间的间距。

名称	说明
padding	padding值，Edgelnsetss
child	子组件

dart

class MyPadding extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
      child: GridView.count(
        crossAxisCount: 2,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network(
              "https://picsum.photos/seed/841/600/500",
              fit: BoxFit.cover,
            ),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network(
              "https://picsum.photos/seed/841/600/500",
              fit: BoxFit.cover,
            ),
          ),
        ],
      ),
    );
  }
}

Flutter布局-Row水平布局组件

名称	说明
mainAxisAlignment	主轴的排序方式
crossAxisAlignment	次轴的排序方式
children	组件子元素

dart

class MyRow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        IconContainer(Icons.home, Colors.black, 32.0),
        IconContainer(Icons.save_alt, Colors.green, 32.0),
        IconContainer(Icons.backup, Colors.yellow, 32.0),
      ],
    );
  }
}

Flutter布局-Column垂直布局组件

Column和ListView的区别：ListView水平铺满一行

名称	说明
mainAxisAlignment	主轴的排序方式
crossAxisAlignment	次轴的排序方式
children	组件子元素

dart

class MyRow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        IconContainer(Icons.home, Colors.black, 32.0),
        IconContainer(Icons.save_alt, Colors.green, 32.0),
        IconContainer(Icons.backup, Colors.yellow, 32.0),
      ],
    );
  }
}

Flutter布局-Expanded组件

类似于web中的flex布局, Expanded组件中设置子元素宽度无效

名称	说明
flex	元素占整个父元素的比例(不写按元素的比例自适应)
child	子元素

dart

class MyRow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Expanded(
          child: IconContainer(Icons.home, Colors.black, 32.0),
        ),
        Expanded(
          flex: 2,
          child: IconContainer(Icons.ac_unit, Colors.yellow, 32.0),
        ),
      ],
    );
  }
}