Question

我正在尝试制作一个应用程序，并且需要社区的帮助：我正在尝试在另一个页面的顶部进行覆盖（这将是一个新页面）。看看在dribbble上找到的这些屏幕截图，我将尽力更好地解释。

因此，您正在第一页截图中所示的页面上。我想做的是，当您单击时，例如，在“联系页面”按钮上，屏幕底部弹出一个带有线性动画的窗口，并显示视图，如屏幕右侧的屏幕截图所示。屏幕。但我不希望它成为“真正的新页面”，因为如您在第二张屏幕截图中所见，我们可以透明地看到第一页...

当然，当您单击十字按钮时，窗口会弹出...

如果我不够清楚，请问我任何问题。

欢迎任何帮助！非常感谢，stackoverflow是一个非凡的社区！

Answer 1

下面是一个示例，介绍如何使用AnimatedPositioned小部件来实现此目标，希望它可以帮助您入门。

class ExampleApp extends StatefulWidget {
  @override
  _ExampleAppState createState() => _ExampleAppState();
}

class _ExampleAppState extends State<ExampleApp> {
  final double containerHeight = 200.0;

  bool _showProfile;

  @override
  void initState() {
    _showProfile = false;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.teal,
        child: Stack(
          children: <Widget>[
            Container(
              color: Colors.redAccent,
              child: Center(
                child: FlatButton(
                  child: Text("Animate"),
                  onPressed: () {
                    setState(() {
                      _showProfile = true;
                    });
                  },
                ),
              ),
            ),
            AnimatedPositioned(
                bottom: _showProfile ? 0 : -containerHeight,
                right: 0,
                left: 0,
                duration: Duration(milliseconds: 300),
                child: Container(
                  color: Colors.white,
                  height: containerHeight,
                ))
          ],
        ),
      ),
    );
  }
}

Answer 2

您也可以使用 Bottomsheet 实现相同的效果。

退房 https://api.flutter.dev/flutter/material/BottomSheet-class.html

Flutter重叠页面，详细信息帐户页面

2 个答案: