Flutter入门 - 视图

PageView - 滚动图形
PageView(
      pageSnapping: true,
      reverse: true,
      scrollDirection: Axis.vertical,
      onPageChanged: (current) => (
        debugPrint("$current")
      ),
      controller: PageController(
        initialPage: 1,
        keepPage: false,
        viewportFraction: 0.8
      ),
      children: [
        Container(
          color: Colors.purple,
          child: Text("第一个",style: TextStyle(color: Colors.white),),
        ),
        Container(
          color: Colors.purple,
          child: Text("第二个",style: TextStyle(color: Colors.white),),
        ), Container(
          color: Colors.purple,
          child: Text("第三个",style: TextStyle(color: Colors.white),),
        )
      ],
    );

image.png

GridView - 网格视图
1. 通过GridView.count 生成
class MyGridView extends StatelessWidget{

  List _buildChildren(int length){
    return List.generate(length, (int index) {
      return Container(
        alignment: Alignment(0, 0),
        color: Colors.grey,
        child: Text(
          "item $index",
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 3,
      scrollDirection: Axis.vertical,
      crossAxisSpacing: 16.0,
      mainAxisSpacing: 16.0,
      children: _buildChildren(100),
    );
  }
}

2. 通过GridView.builder生成
class MyGridBuilder extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      itemBuilder: _build,
      itemCount: 100,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        crossAxisSpacing: 16.0,
        mainAxisSpacing: 16.0
      ),
    );
  }


  Widget _build(BuildContext context, int index) {
    return Container(
      alignment: Alignment(0, 0),
      color: Colors.grey,
      child: Text(
        "items $index",
      ),
    );
  }
}

Padding 小部件 可以设置padding
Material 小部件