Flutter listView gridView sliver

listView

截屏2020-05-23 上午11.41.21.png

import 'dart:ui';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("list view test"),
        ),
        body: MyHome(),
      ),
    );
  }
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.separated(
        // 设置cell
        itemBuilder: (BuildContext context , int index){
          return Text("ListView.sepatated : $index");
        },
        // 设置线
        separatorBuilder: (BuildContext context , int index){
          return Divider(
              color: Colors.black,
              height: 50,
              indent: 20,
              endIndent: 20,
            thickness: 1,
          );
        },
        itemCount: 100
    );
  }

  ListView buildListViewBuilder() {
    return ListView.builder(
      itemCount: 100,
      itemExtent: 100,
      // 相当于懒加载，展示的时候就会调用这个builder
      itemBuilder: (BuildContext context, int index) {
        // 返回一个 widget
        return Text("hello world : $index");
      });
  }

  ListView buildListView() {
    return ListView(
        // 行高大小
        itemExtent: 100,
        // 一次性直接加载，一般简单布局，可以使用，相对性能较差一点
        children: List.generate(100, (index) {
          return ListTile(
            leading: Icon(Icons.favorite),
            trailing: Icon(Icons.delete),
            title: Text("当前第$index行"),
            subtitle: Text("subtitle : $index"),
          );
        }));
  }
}

gridView

截屏2020-05-23 上午11.53.44.png

import 'dart:math';
import 'dart:ui';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("gridView test"),
        ),
        body: MyHome(),
      ),
    );
  }
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            crossAxisSpacing: 5,
            mainAxisSpacing: 5
          ),
          itemBuilder: (BuildContext context , int index){
            return Container(
              color: Color.fromARGB(255, Random().nextInt(255), Random().nextInt(255), Random().nextInt(255)),
            );
          },
      ),
    );
  }

  Padding buildPaddingGridview() {
    return Padding(
    padding: const EdgeInsets.all(8.0),
    child: GridView(
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        // item 想要占据的宽度
        maxCrossAxisExtent: 100
      ),
      children: List.generate(100, (index) {
        return Container(
          color: Color.fromARGB(255, Random().nextInt(255), Random().nextInt(255), Random().nextInt(255)),
        );
      }),
    ),
  );
  }

  GridView buildGridView() {
    return GridView(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          // 每行个数
            crossAxisCount: 5,
          // 夸高比例
          childAspectRatio: 1,

          crossAxisSpacing: 10,
          mainAxisSpacing: 10
        ),
      children: List.generate(100, (index) {
        return Container(
          color: Color.fromARGB(255, Random().nextInt(255), Random().nextInt(255), Random().nextInt(255)),
        );
      }),
    );
  }
}

sliver

import 'dart:math';
import 'dart:ui';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: buildCustomScrollView(),
      ),
    );
  }
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return buildCustomScrollView();
  }
}

CustomScrollView buildCustomScrollView() {
  // 在这里也可以加 safearea，但是滚动的话就滚动不到头了，上面会有一块空白
  return CustomScrollView(
    slivers: <Widget>[
      // 传入要构建的 sliver ， 比如 listview gridview
      // 安全区域,在这里加安全区域可以滚动到头部
      SliverSafeArea(
          // 然后给加一个内边距,这个内边距是可以滚动的，如果加padding 的话，上面的空白边距是不能滚动的
          sliver: SliverPadding(
        padding: EdgeInsets.all(5),
        sliver: SliverGrid(
            delegate:
                SliverChildBuilderDelegate((BuildContext context, int index) {
              // 在 GridView 里面要构建的东西
              return Container(
                color: Color.fromARGB(255, Random().nextInt(255),
                    Random().nextInt(255), Random().nextInt(255)),
              );
            },
                    // 最大滚动个数
                    childCount: 10),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2, mainAxisSpacing: 10, crossAxisSpacing: 5)),
      ))
    ],
  );
}