flutter - 使Zara像产品页面一样 flutter 朔迷离

Question

我想像Zara的App一样制作产品页面。我无法在应用程序中实现其应用程序功能。它们有一个您可以查看图像的区域，可以使用PageView小部件来实现，但是如何实现滑动后出现的底部功能？我尝试使用DraggableScrollableSheet，但随后无法将PageView用于图像，因为DraggableScrollableSheet占据了整个屏幕。我目前的实现如下:

class _IndividualProductState extends State<IndividualProduct> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Container(
         child: Stack(
          children: <Widget>[
            //  ---------------Image container -----------------------------------------

            Container(
              padding: EdgeInsets.all(20),
              color: Colors.white,
              height: MediaQuery.of(context).size.height * 0.78,
              width: MediaQuery.of(context).size.width,
              child: PageView(
                scrollDirection: Axis.vertical,
                controller: PageController(initialPage: 1),
                children: <Widget>[
                  Image.network(
                    "https://m.media-amazon.com/images/I/81pV8zF-RML._AC_UL320_ML3_.jpg",
                     fit: BoxFit.contain,
                  ),
                  Image.network(
                    "https://m.media-amazon.com/images/I/81pV8zF-RML._AC_UL320_ML3_.jpg",
                     fit: BoxFit.contain,
                  ),
                ],
              ),
            ),

            // -------------------------- For Product Description ---------------------------------------
            Scaffold(
              backgroundColor: Colors.transparent,
              body: DraggableScrollableSheet(
                minChildSize: 0.17,
                initialChildSize: 0.17,
                maxChildSize: 0.93,
                builder:
                    (BuildContext context, ScrollController scrollController) {
                  return Container(
                    color: Colors.grey[100],
                    child: ListView(
                      padding: EdgeInsets.all(0),
                      controller: scrollController,
                      children: <Widget>[
                        Center(
                          heightFactor: 0.3,
                          child: ListTile(
                            title: Icon(MaterialCommunityIcons.minus, size: 32),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.fromLTRB(8, 8, 8, 0),
                          child: CustomText(
                            "COMFORT KNIT TEXTURED TROUSER",
                            weight: FontWeight.w500,
                            size: 15,
                          ),
                        ),
                      ],
                    ),
                  );
                },
              ),
            ),

            //  Close icon to close the product page
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: GestureDetector(
                child: Icon(
                  Icons.close,
                  size: 32,
                ),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
            ),
          ],
          // ),
        ),
        // ),
      ),
    );
    // );
  }
}

我希望图像可滚动，也可以通过向上滑动显示说明表。

Answer 1

您似乎正在寻找一个在Material Design系统中称为Backdrop的组件。根据Material Design's Backdrop page:

A backdrop appears behind all other surfaces in an app, displaying contextual and actionable content.

我认为现成的Flutter库中仍然缺少Backdrop小部件，因为Material Design系统仍将Beta组件设计视为处于beta阶段。

但是，有 a reusable implementation by Hans Muller from the Flutter samples gallery和 a detailed Medium article about the Backdrop by Matt Sullivan可以帮助您构建适合您需要的自己的Backdrop组件版本。

如果这不是您所需要的，请用剪辑或图像进行评论，以准确显示您想要的行为。您现在拥有的可运行 main dart代码片段对我了解您要实现的目标特别有用。