Question

我正在尝试使用CustomScrollView创建一个scrollView。我需要的效果与this one非常相似。

我需要将SliverList堆叠在SliverAppbar上方，而列表不能占据整个屏幕并隐藏SliverAppbar。我想这样做的原因是，我需要在该列表顶部附加一个持久的Positioned小部件，除非列表堆叠在SliverAppbar上方，否则它不会出现。

这是我的code。

Answer 1

第一步： 在SliverAppBar小部件内使用ListView。使CSS溢出：隐藏效果。

第二步： 将控制器添加到NestedScrollView并在堆栈中滚动时移动按钮。加上计算您要停止按钮移动的位置。

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ScrollController scrollController;
  final double expandedHight = 150.0;

  @override
  void initState() {
    super.initState();
    scrollController = new ScrollController();
    scrollController.addListener(() => setState(() {}));
  }

  @override
  void dispose() {
    scrollController.dispose();
    super.dispose();
  }

  double get top {
    double res = expandedHight;
    if (scrollController.hasClients) {
      double offset = scrollController.offset;
      if (offset < (res - kToolbarHeight)) {
        res -= offset;
      } else {
        res = kToolbarHeight;
      }
    }
    return res;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Stack(
        children: [
          NestedScrollView(
            controller: scrollController,
            headerSliverBuilder: (context, value) {
              return [
                SliverAppBar(
                  pinned: true,
                  expandedHeight: expandedHight,
                  flexibleSpace: ListView(
                    physics: const NeverScrollableScrollPhysics(),
                    children: [
                      AppBar(
                        title: Text('AfroJack'),
                        elevation: 0.0,
                      ),
                      Container(
                        color: Colors.blue,
                        height: 100,
                        alignment: Alignment.center,
                        child: RaisedButton(
                          child: Text('folow'),
                          onPressed: () => print('folow pressed'),
                        ),
                      ),
                    ],
                  ),
                ),
              ];
            },
            body: ListView.builder(
              physics: const NeverScrollableScrollPhysics(),
              itemCount: 80,
              itemBuilder: (BuildContext context, int index) {
                return Text(
                  'text_string'.toUpperCase(),
                  style: TextStyle(
                    color: Colors.white,
                  ),
                );
              },
            ),
          ),
          Positioned(
            top: top,
            width: MediaQuery.of(context).size.width,
            child: Align(
              child: RaisedButton(
                onPressed: () => print('shuffle pressed'),
                child: Text('Suffle'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Flutter CustomScrollView条状堆叠

1 个答案: