Flutter之页面布局

Column、Row、Stack以及Center之前博客有过就不赘述了

get到了一些与布局相关的组件例如

1、FractionallySizedBox

class ListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        FractionallySizedBox(
          widthFactor: 1,//宽度要100%，即撑满
          child: Container(
            decoration: BoxDecoration(
              color: Colors.greenAccent
            ),
            child: Center(
              child: Text('宽度撑满'),
            ),
          ),
        ),
      ],
    );
  }
}

2、ClipRRect

我一直少了中间的R，找了半个小时的bug，TMD！

Padding(
    padding: EdgeInsets.all(20),
    child: ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(40)),
        child: Opacity(
            opacity: 0.6,
            child: Image.network('http://www.devio.org/img/avatar.png'),
        ),
    ),
)

3、Wrap
 

Wrap(//Wrap布局会从左到右进行排列，并且自动换行
          spacing: 15,//水平间距
          runSpacing: 10,//竖直间距
          children: <Widget>[
            _chip('C语言'),
            _chip('C++'),
            _chip('Java'),
            _chip('Python'),
            _chip('HTML'),
            _chip('CSS'),
            _chip('JavaScript'),
            _chip('Dart'),
            _chip('Flutter'),
          ],
)



_chip(String s) {
    return Chip(
      label: Text(s),
      avatar: CircleAvatar(
        backgroundColor: Colors.lightBlueAccent[200],
        child: Text(
          s.substring(0,1),
          style:TextStyle(fontSize: 10),
        ),
      ),
    );
  }