Flutter 中的重叠卡片效果答案

【问题标题】：Overlapping card effect in FlutterFlutter 中的重叠卡片效果
【发布时间】：2019-12-22 14:50:23
【问题描述】：

如何在SliverAppBar中创建重叠卡片效果如图：

我尝试关注 Medium 的 this 文章，但问题是它使用 Stack 和

Stack{
  ...
  overflow: Overflow.visible,
  ...
}

为了实现这一点，在 Stack 中，溢出的部分小部件不接受输入，从而使我的 TabBar 半死。

我能做些什么来避免这种情况？

【问题讨论】：

也许可以试试OverflowBox 或SizedOverflowBox
没有。我使用了 SizedOverflowBox，但它仍然不需要任何输入。
检查我的答案here。它可以帮助你

标签： android flutter flutter-layout

【解决方案1】：

完整代码

import 'package:flutter/material.dart';

Future<void> main() async {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MenuList(),
    );
  }
}

class MenuList extends StatefulWidget {
  @override
  _MenuListState createState() => _MenuListState();
}


class _MenuListState extends State<MenuList> {
  static const double _appBarBottomBtnPosition =
  24.0; //change this value to position your button vertically

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            title: Text(
              'Testing',
              style: TextStyle(color: Colors.red),
            ),
          ),
          SliverAppBar(
            pinned: true,
            expandedHeight: 200.0,
            flexibleSpace: FlexibleSpaceBar(
              centerTitle: true,
              titlePadding: EdgeInsets.only(bottom: 25),
              title: Text('Title'),
            ),
            bottom: PreferredSize(
              preferredSize: const Size.fromHeight(0.0),
              child: Transform.translate(
                offset: const Offset(0, _appBarBottomBtnPosition),
                child: RaisedButton(
                  shape: StadiumBorder(),
                  child: Text("Click Here"),
                  onPressed: () {},
                ),
              ),
            ),
          ),
          SliverPadding(
            padding: EdgeInsets.only(top: _appBarBottomBtnPosition),
          ),
          SliverFixedExtentList(
            itemExtent: 50,
            delegate: SliverChildBuilderDelegate(
                (context, index){
                  Color color = Colors.red.withOpacity(1- (index%10)/10);
                  return Container(
                    color: color,
                    alignment: Alignment.center,
                    child: Text("Color: $color"),
                  );
                }
            ),
          ),
        ],
      ),
    );
  }
}

【讨论】：

感谢您的回答，但即使在使用 PreferredSize 和 Transform.translate 之后，位于外面的部分也没有响应。