如何使用英雄拥有相同的页面目的地

问题描述 投票：1回答：3

我正试图制作一个扑动的应用程序。它是一个可以创建容器的应用程序。然后，当您按下这些容器时，它将打开一个页面。所以，我尝试使用具有无限可创建容器的英雄。这就是我想出的：

import 'package:flutter/material.dart';

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

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            backgroundColor: Colors.white,
            body: Column(children: <Widget>[
              Body(),
            ])));
  }
}

class Body extends StatefulWidget {
  @override
  _BodyState createState() => _BodyState();
}

class _BodyState extends State<Body> {
  final String open1 = 'open';

  int count = 1;

  @override
  Widget build(BuildContext context) {
    List cards = List.generate(count, (int i) => RCard(count));

    return Expanded(
        child: Container(
            child: NotificationListener<OverscrollIndicatorNotification>(
                onNotification: (OverscrollIndicatorNotification overscroll) {
                  overscroll.disallowGlow();
                },
                child: PageView.builder(
                    reverse: true,
                    pageSnapping: false,
                    controller: PageController(viewportFraction: 0.85),
                    itemCount: count,
                    itemBuilder: (context, i) {
                      if (i == 0) {
                        return GestureDetector(
                            onTap: () {
                              Navigator.push(
                                context,
                                MaterialPageRoute(
                                    builder: (context) => Page(
                                          open: open1,
                                        )),
                              );
                              count++;
                            },
                            child: Hero(
                                tag: open1,
                                child: Padding(
                                    padding: EdgeInsets.only(
                                        left:
                                            MediaQuery.of(context).size.height *
                                                0.015,
                                        right:
                                            MediaQuery.of(context).size.height *
                                                0.015,
                                        top: MediaQuery.of(context).size.width *
                                            0.08,
                                        bottom:
                                            MediaQuery.of(context).size.width *
                                                0.15),
                                    child: Material(
                                        borderRadius:
                                            BorderRadius.circular(40.0),
                                        color: Colors.white,
                                        elevation: 8.0,
                                        child: InkWell(
                                          child: Column(
                                              mainAxisAlignment:
                                                  MainAxisAlignment.center,
                                              children: <Widget>[
                                                Icon(
                                                  Icons.add,
                                                  size: 30.0,
                                                  color: Colors.black,
                                                )
                                              ]),
                                        )))));
                      } else {
                        return cards[i];
                      }
                    }))));
  }
}

class RCard extends StatefulWidget {
  final int count;

  RCard(this.count);

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

class RCardState extends State<RCard> {
  int count;
  String open2;
  @override
  void initState() {
    super.initState();
    open2 = 'open$count';
    count = widget.count;
  }

  @override
  Widget build(BuildContext context) {
    return Hero(
      tag: open2,
      child: GestureDetector(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => Page(
                        open: open2,
                      )),
            );
          },
          child: Padding(
            padding: EdgeInsets.only(
                left: MediaQuery.of(context).size.height * 0.015,
                right: MediaQuery.of(context).size.height * 0.015,
                top: MediaQuery.of(context).size.width * 0.08,
                bottom: MediaQuery.of(context).size.width * 0.15),
            child: Material(
                borderRadius: BorderRadius.circular(40.0),
                color: Colors.white,
                elevation: 8.0,
                child: Padding(
                  padding:
                      EdgeInsets.all(MediaQuery.of(context).size.width * 0.15),
                )),
          )),
    );
  }
}

class Page extends StatelessWidget {
  final String open;

  Page({this.open});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Hero(tag: open, child: Material()),
      onTap: () {
        Navigator.pop(context);
      },
    );
  }
}

但是，此代码仅在我创建1个容器时有效。当我创建2个容器并按下它时，它会给我一个黑屏。我怎么解决这个问题？

dart flutter
3个回答
1
投票

我发现你需要做的就是删除列表'cards'并将'cards [i]'方法改为'RCard（i）'。

import 'package:flutter/material.dart';

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

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            backgroundColor: Colors.white,
            body: Column(children: <Widget>[
              Body(),
            ])));
  }
}

class Body extends StatefulWidget {
  @override
  _BodyState createState() => _BodyState();
}

class _BodyState extends State<Body> {
  final String open1 = 'open';

  int count = 1;

  @override
  Widget build(BuildContext context) {

    return Expanded(
        child: Container(
            child: NotificationListener<OverscrollIndicatorNotification>(
                onNotification: (OverscrollIndicatorNotification overscroll) {
                  overscroll.disallowGlow();
                },
                child: PageView.builder(
                    reverse: true,
                    pageSnapping: false,
                    controller: PageController(viewportFraction: 0.85),
                    itemCount: count,
                    itemBuilder: (context, i) {
                      if (i == 0) {
                        return GestureDetector(
                            onTap: () {
                              Navigator.push(
                                context,
                                MaterialPageRoute(
                                    builder: (context) => Page(
                                          open: open1,
                                        )),
                              );
                              count++;
                            },
                            child: Hero(
                                tag: open1,
                                child: Padding(
                                    padding: EdgeInsets.only(
                                        left:
                                            MediaQuery.of(context).size.height *
                                                0.015,
                                        right:
                                            MediaQuery.of(context).size.height *
                                                0.015,
                                        top: MediaQuery.of(context).size.width *
                                            0.08,
                                        bottom:
                                            MediaQuery.of(context).size.width *
                                                0.15),
                                    child: Material(
                                        borderRadius:
                                            BorderRadius.circular(40.0),
                                        color: Colors.white,
                                        elevation: 8.0,
                                        child: InkWell(
                                          child: Column(
                                              mainAxisAlignment:
                                                  MainAxisAlignment.center,
                                              children: <Widget>[
                                                Icon(
                                                  Icons.add,
                                                  size: 30.0,
                                                  color: Colors.black,
                                                )
                                              ]),
                                        )))));
                      } else {
                        return RCard(i);
                      }
                    }))));
  }
}

class RCard extends StatefulWidget {
  final int count;

  RCard(this.count);

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

class RCardState extends State<RCard> {
  int count;
  String open2;
  @override
  void initState() {
    super.initState();
    open2 = 'open$count';
    count = widget.count;
  }

  @override
  Widget build(BuildContext context) {
    return Hero(
      tag: open2,
      child: GestureDetector(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => Page(
                        open: open2,
                      )),
            );
          },
          child: Padding(
            padding: EdgeInsets.only(
                left: MediaQuery.of(context).size.height * 0.015,
                right: MediaQuery.of(context).size.height * 0.015,
                top: MediaQuery.of(context).size.width * 0.08,
                bottom: MediaQuery.of(context).size.width * 0.15),
            child: Material(
                borderRadius: BorderRadius.circular(40.0),
                color: Colors.white,
                elevation: 8.0,
                child: Padding(
                  padding:
                      EdgeInsets.all(MediaQuery.of(context).size.width * 0.15),
                )),
          )),
    );
  }
}

class Page extends StatelessWidget {
  final String open;

  Page({this.open});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Hero(tag: open, child: Material()),
      onTap: () {
        Navigator.pop(context);
      },
    );
  }
}
0
投票

您只能在一个类中拥有一个具有相同标记值的Hero窗口小部件。如果你想同时发生两个以上的英雄动画，你必须给每个英雄小部件不同的标签值。

0
投票

每次创建tag时，请尝试给出独特的Hero值。黑屏错误很可能是因为两个或更多Hero元素获得相同的tag值。

例如，在qazxsw poi中，您将获得变量qazxsw poi中的当前索引。您可以使用此索引使itemBuilder: (context, i)值唯一。

i

您可以执行类似操作以确保所有tag元素的值都是唯一的。如果有帮助，请告诉我！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.