5-flutter 布局和列表

布局和列表

1 Row 横向 布局

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[Text("111"),Text("222"),Text("333"),Text("444"),],
    );
  }

2 Column 竖向布局

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[Text("Column 111"),Text("Column 222"),Text("Column 333"),Text("Column 444"),],
    );
  }

3 RelativeLayout 相对布局

用于使widget 相对于彼此位置排。

4 分层布局

Stack 控件将其子项相对于框的边缘定位。如果您只想重叠多个子窗口小部件，这个类很有用。

譬如说 图片上面添加一个标签

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: const Alignment(0.5, 0.5),
      children: <Widget>[
        CircleAvatar(backgroundImage: NetworkImage("http://img.redocn.com/sheying/20150213/mulanweichangcaoyuanfengjing_3951976.jpg"),),            
        Container(decoration: BoxDecoration(color: Colors.red),
        child: Text("Ye Ge"),)    
      ],
    );
  }

5 设置布局样式

用以下的方式进行布局

• padding
• center
• column
• row

6 LIstView 列表组件

scrollView 和 Tableview 的作用

更新列表方法 setState()

Flutter 渲染引擎会检查widget 树来查看widget 树 是否有什么地方改变了

动态的添加数据使用ListView.builder 来构建列表

class _MyCanvas extends StatelessWidget{
    @override
    Widget build(BuildContext context) {

      // 制作一些数据
      _makeSomeData(){
        // 创建一个存放widget的数组
        List<Widget> arr = [];
        for (int i =0;i < 100;i ++){
          arr.add(Padding(padding: EdgeInsets.all(20),child: Text("第 $i 行"),));
        }     
        return arr;
      }

      // TODO: implement build
      return Scaffold(
        appBar: AppBar(title: Text("Alex Code"),),
        body: Center(
          child: ListView(children: _makeSomeData()),          
        ),
      );
        
}