Flutter-CustomScrollView的使用，实现悬停

最新推荐文章于 2023-12-15 15:25:45 发布

IT兔子123

最新推荐文章于 2023-12-15 15:25:45 发布

阅读量7.3k

点赞数

分类专栏： Flutter 文章标签： Flutter-CustomScrollView的使用，实现 Flutter实现悬停

本文链接：https://blog.csdn.net/u013425527/article/details/98487481

版权

本文通过Flutter的CustomScrollView组件详细讲解如何实现悬停效果。首先，使用CustomScrollView结合SliverAppBar创建固定头部，并展示灵活空间；然后，利用SliverGrid展示列表项，设置间距与宽高比；最后，通过SliverFixedExtentList创建固定高度的列表。通过实例代码，掌握Flutter悬停及自定义滚动视图的运用。

摘要由CSDN通过智能技术生成

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    title: 'Container demo',
    home: new MyScrv(),
  ));
}

class MyScrv extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState

    return new MyScrvState();
  }
}

class MyScrvState extends State<MyScrv> {
  List<String> _list = new List();
  List<Color> myColors = new List();

  @override
  void initState() {
    _list.add("政府");
    _list.add("部门11");
    _list.add("部门22");
    myColors.add(Colors.red);
    myColors.add(Colors.lightBlue);
    myColors.add(Colors.lightBlue);
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new CustomScrollView(physics: ScrollPhysics(), slivers: <Widget>[
      const SliverAppBar(
        pinned: true,
        expandedHeight: 250.0,
        flexibleSpace: con