flutter - 如何在 CustomScrollView 中设置绘制顺序

Question

我有一个带有 3 个 child 的 CustomScrollView。我想渲染第三个 child 而不是第二个 child 。

我使用 sliver 是因为我想在 ListView 下方渲染一个框，并且当用户滚动时该框将向上滚动。此行为有效，但问题是 ListView 呈现在框下方。

这是我的代码:

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  void initState() {
    super.initState();
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(statusBarColor: Colors.transparent));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            backgroundColor: Color(0xFF26B89A),
            expandedHeight: 350,
            pinned: true,
          ),
          AppBarOverflow(
            child: Container(
              width: double.infinity,
              height: 100,
              color: Color(0xFF26B89A),
            ),
          ),
          SliverList(
            delegate: SliverChildListDelegate.fixed([
              buildItem(),
              buildItem(),
              buildItem(),
              buildItem(),
              buildItem(),
              buildItem(),
              buildItem(),
              buildItem(),
            ]),
          ),
        ],
      )
    );
  }

  Widget buildItem() {
    return Container(
      alignment: Alignment.center,
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 3.0),
        child: Card(
          child: Container(
            width: 400,
            height: 100,
          ),
        ),
      ),
    );
  }

}


class AppBarOverflow extends SingleChildRenderObjectWidget {

  AppBarOverflow({Widget child, Key key}): super(child: child, key: key);

  @override
  RenderObject createRenderObject(BuildContext context) {
    // TODO: implement createRenderObject
    return _AppBarOverflowRenderObject();
  }

}

class _AppBarOverflowRenderObject extends RenderSliverSingleBoxAdapter {

  _AppBarOverflowRenderObject({
    RenderBox child,
  }) : super(child: child);

  @override
  void paint(PaintingContext context, Offset offset) {
    if (child != null && geometry.visible) {
      context.paintChild(child, offset);
    }

  }

  @override
  void performLayout() {
    if (child == null) {
      geometry = SliverGeometry.zero;
      return;
    }
    child.layout(constraints.asBoxConstraints(), parentUsesSize: true);
    var _scrolled = -(constraints.viewportMainAxisExtent - constraints.remainingPaintExtent * 2);
    if (_scrolled < 0)
      _scrolled = 0;
    geometry = SliverGeometry(
      paintExtent: child.size.height,
      maxPaintExtent: child.size.height,
      paintOrigin: -(_scrolled / 3),
      layoutExtent: 10,
    );
    setChildParentData(child, constraints, geometry);

  }

}

结果是

我想要的结果:

Answer 1

嗨，我用另一种方式做到了。您需要这样的东西吗？

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ScrollController scrollcontroller;

  @override
  void initState() {
    scrollcontroller = ScrollController()
      ..addListener(() {
        print(scrollcontroller.offset);
      });
    super.initState();
    SystemChrome.setSystemUIOverlayStyle(
        SystemUiOverlayStyle(statusBarColor: Colors.transparent));
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        controller: scrollcontroller,
        headerSliverBuilder: (context, value) {
          return <Widget>[
            SliverAppBar(
              backgroundColor: Color(0xFF26B89A),
              expandedHeight: 350,
              pinned: true,
            ),
          ];
        },
        body: ListView(
          physics: ClampingScrollPhysics(),
          padding: EdgeInsets.zero,
          children: <Widget>[
            _FirstItem(scrollcontroller),
            _Item(),
            _Item(),
            _Item(),
            _Item(),
            _Item(),
            _Item(),
            _Item(),
            _Item(),
          ],
        ),
      ),
    );
  }
}

class _FirstItem extends StatelessWidget {
  _FirstItem(this.scrollcontroller);
  final ScrollController scrollcontroller;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        AnimatedBuilder(
          animation: scrollcontroller,
          builder: (_, __) {
            var height = 230 - scrollcontroller.offset;
            var maxHeight = 90.0;
            return Container(
              color: Color(0xFF26B89A),
              width: double.infinity,
              height: height < maxHeight ? height > 0 ? height : 0 : maxHeight,
            );
          },
        ),
        _Item(),
      ],
    );
  }
}

class _Item extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 3.0),
        child: Card(
          child: Container(
            width: 400,
            height: 100,
          ),
        ),
      ),
    );
  }
}