Slivers

Sliver世界

Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: CustomScrollView(
        slivers: [
          SliverToBoxAdapter(child: FlutterLogo(size: 200)),
          SliverGrid.count(
            crossAxisCount: 4,
            children: List.generate(
              44,
              (index) => Container(
                height: 200,
                color: Colors.primaries[index % 18],
              ),
            ),
          ),
          SliverList(delegate: SliverChildBuilderDelegate(
            (context, index) {
              return Container(
                height: 200,
                color: Colors.primaries[index % 18],
              );
            },
          ))
        ],
      ),
    );

SliverPrototypeExtentList

CustomScrollView(
        slivers: [
          SliverPrototypeExtentList( // 根据用户手机上的item大小来设置extend，利于性能优化
            delegate: SliverChildListDelegate([
              Text('hello'),
              Text('hello'),
              Text('hello'),
            ]),
            prototypeItem: FlutterLogo( // 这里的组件就是item
              size: 48,
            ),
          ),
        ],
      ),

SliverFillViewport

CustomScrollView(
        slivers: [
          SliverFillViewport( //类似Pageview一样充满整个屏幕视图
            delegate: SliverChildListDelegate([
              Container(color: Colors.red),
              Container(color: Colors.amber),
              Container(color: Colors.green),
            ]),
          ),
        ],
      ),

SliverAppBar（实用的带动画AppBar）

CustomScrollView(
        slivers: [
          SliverAppBar(
            // title: Text('Sliver App Bar'), // 自带的title
            // floating: true, // 滑动隐藏/显示
            // snap: true, // 是否吸附，完整显示/隐藏
            pinned: true, // 固定住，不隐藏的
            flexibleSpace: FlexibleSpaceBar( // 上拉预留空间
              background: FlutterLogo(),
              title: Text('Hello, Sliver App bar!'),
            ),
            expandedHeight: 300, // 上拉预留空间的高度
          ),
          SliverToBoxAdapter(
            child: Placeholder(),
          ),
          SliverList(
              delegate: SliverChildListDelegate([
            FlutterLogo(size: 100),
            FlutterLogo(size: 100),
            FlutterLogo(size: 200),
            FlutterLogo(size: 200),
            FlutterLogo(size: 200),
            FlutterLogo(size: 200),
          ]))
        ],
      ),

SliverAppBar(
            // title: Text('Sliver App Bar'),
            // floating: true,
            // snap: true,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              background: FlutterLogo(),
              title: Text('Hello, Sliver App bar!'),
              stretchModes: [ // 拉伸动画
                StretchMode.blurBackground,
                StretchMode.zoomBackground,
                StretchMode.fadeTitle,
              ],
               collapseMode: CollapseMode.parallax, // 视差效果
            ),
            expandedHeight: 300,
            stretch: true, // 应用拉伸动画
          ),

计算剩余内容

slivers: [
          SliverAppBar(
            title: Text('flutter sliver.'),
          ),
          SliverToBoxAdapter(
            child: FlutterLogo(size: 230),
          ),
          SliverGrid(
            delegate: SliverChildListDelegate([
              Icon(Icons.add),
              Icon(Icons.dashboard),
              Icon(Icons.fiber_dvr_sharp),
              Icon(Icons.water_damage),
            ]),
            gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
              maxCrossAxisExtent: 180,
            ),
          ),
          SliverToBoxAdapter(
            child: Divider(
              height: 30,
              thickness: 4,
              indent: 20,
              endIndent: 20,
              color: Colors.amber,
            ),
          ),
          SliverFillRemaining( // 计算屏幕剩余的页面内容
            child: Container(
              alignment: Alignment.center,
              color: Colors.black,
              child: CircularProgressIndicator(),
            ),
          ),
        ],

事件打开 Drawer

1.在组件中定义一个 GlobalKey：

Read More

IndexedStack 保持页面状态

IndexedStack 和 Stack 一样，都是层布局控件， 可以在一个控件上面放置另一

Read More

生成的模型类，支持类型检查

class FocusModel {
  List<FocusItemModel>? result;

  FocusModel({this.result});

  FocusModel.fromJson(Map<String, dynamic> json) {
    if (json['result'] != null) {
      result = <FocusItemModel>[];
      json['result'].forEach((v) {
        result!.add(new FocusItemModel.fromJson(v));
      });
    }
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    if (this.result != null) {
      data['result'] = this.result!.map((v) => v.toJson()).toList();
    }
    return data;
  }
}

class FocusItemModel {
  String? sId;
  String? title;
  String? status;
  String? pic;
  String? url;

  FocusItemModel({this.sId, this.title, this.status, this.pic, this.url});

  FocusItemModel.fromJson(Map<String, dynamic> json) {
    sId = json['_id'];
    title = json['title'];
    status = json['status'];
    pic = json['pic'];
    url = json['url'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['_id'] = this.sId;
    data['title'] = this.title;
    data['status'] = this.status;
    data['pic'] = this.pic;
    data['url'] = this.url;
    return data;
  }
}

使用

  _getFocusState() async {
    var api = 'https://...';
    var res = await Dio().get(api);
    var focusList = FocusModel.fromJson(res.data);

    setState(() {
      _focusData = focusList.result!;
    });
  }

json_to_dart 自动生成模型类

json to dart

Read More