Flutter开发（3） 常用组件 listview 、 gridview 、rowWidget(水平布局)、columnWidget(垂直布局)

listview 

import 'package:flutter/material.dart';

void main() => runApp(MyApp(
  items:new List<String>.generate(1000, (i)=>'Item $i')
));

class MyApp extends StatelessWidget {

  final List<String> items;
  MyApp({Key key,@required this.items}):super(key:key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'laoniu home',
      home: Scaffold(
        appBar: AppBar(
          title: Text('laoniu ListView'),
        ),
        body: new ListView.builder(
          itemCount: items.length,
          itemBuilder: (context,index){
            return new ListTile(
              title:new Text('${items[index]}'),
            );
          },
        )
      ),
    );
  }
}

 

gridview

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  //定义数据
  List<Widget> gridItems() {
    List<Widget> mlist = new List();
    for (var i = 1; i <= 20; i++) {
      mlist.add(Container(
        alignment: Alignment.center,
        child: Text(
          '第 $i 条数据',
          style: TextStyle(color: Colors.red, fontSize: 18),
        ),
        color: Colors.yellow,
      ));
    }
    return mlist;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'laoniu home',
      home: Scaffold(
          appBar: AppBar(
            title: Text('laoniu GridView'),
          ),
          body: GridView(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                mainAxisSpacing: 2.0,
                crossAxisSpacing: 2.0,
                childAspectRatio: 0.7),
            children: this.gridItems(),
          )),
    );
  }
}

 

rowWidget(水平布局)

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'laoniu home',
      home: Scaffold(
          appBar: AppBar(
            title: Text('laoniu GridView'),
          ),
          body: new Row(
            children: <Widget>[
              new RaisedButton(
                onPressed: () {},
                color: Colors.redAccent,
                child: new Text('第 1 个Button'),
              ),
              //Expanded 相当于android里的权重，自动填充满，多个就按比例填充
              Expanded(
                child: new RaisedButton(
                  onPressed: () {},
                  color: Colors.blueAccent,
                  child: new Text('第 2 个Button'),
                ),
              ),
              new RaisedButton(
                onPressed: () {},
                color: Colors.redAccent,
                child: new Text('第 3 个Button'),
              ),
            ],
          )),
    );
  }
}

 

 

columnWidget(垂直布局)

 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'laoniu home',
      home: Scaffold(
          appBar: AppBar(
            title: Text('laoniu 垂直布局'),
          ),
          //可以body下加一个center属性，让子类居中
          body: new Column(
            //水平居中，相对于Column容器居中
            crossAxisAlignment: CrossAxisAlignment.center,
            //垂直居中，相对于父容器（这里是body）居中
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new RaisedButton(
                onPressed: () {},
                color: Colors.redAccent,
                child: new Text('第 1 个Button'),
              ),
              new RaisedButton(
                onPressed: () {},
                color: Colors.blueAccent,
                child: new Text('第 2 个Button'),
              ),
              new RaisedButton(
                onPressed: () {},
                color: Colors.redAccent,
                child: new Text('第 3 个Button'),
              ),
            ],
          )),
    );
  }
}