如何删除 Flutter ListView 中的剪辑？答案

【问题标题】：How to remove clipping in a Flutter ListView?如何删除 Flutter ListView 中的剪辑？
【发布时间】：2019-01-05 09:43:39
【问题描述】：

我有以下布局，一个Stack，下面有一个ListView，都在Column内。

当我滚动 ListView 时，正如预期的那样，它会在自己的框中自行剪辑。

我想要ListView，当滚动到上面的Stack 上方时。就像它的边界没有被剪裁一样。

我怎样才能做到这一点？

【问题讨论】：

标签： listview dart stack flutter clipping

【解决方案1】：

您将需要一个CustomScrollView，并且您的标题小部件必须放在SliverPersistentHeader 中：

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverPersistentHeader(
            delegate: MyHeader(),
            pinned: true,
          ),
          SliverList(delegate: SliverChildBuilderDelegate((context, index) {
            return ListTile(
              title: Text('Test $index'),
            );
          }))
        ],
      ),
    );
  }
}

class MyHeader extends SliverPersistentHeaderDelegate {
  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
   return Stack(
      children: <Widget>[
        Container(color: Colors.blue.withOpacity(0.5)),
        Align(
          alignment: Alignment.bottomCenter,
          child: Text('Hello World'),
        )
      ],
    );
  }

  @override
  double get maxExtent => 100.0;

  @override
  double get minExtent => 100.0;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
    return false;
  }
}

要创建浮动AppBar，请使用SliverAppBar 小部件：

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            title: Text('Flutter Playground'),
            pinned: true,
            backgroundColor: Colors.orange.withOpacity(0.5),
          ),
          SliverList(delegate: SliverChildBuilderDelegate((context, index) {
            return ListTile(
              title: Text('Test $index'),
            );
          }))
        ],
      ),
    );
  }
}

【讨论】：

【解决方案2】：

在列表视图中添加

clipBehavior: Clip.none

【讨论】：