Question

我正在尝试制作一个扑朔迷离的应用程序。最近，我学习了如何将Hero与两个具有相同目标的不同按钮一起使用。因此，我尝试将Hero用于无限可创建的容器。这是我想出的：

<div class="b">
</div>

<br>
<div class="a">
</div>

但是，当我创建第二个容器并按下它时，它将显示黑屏，并在调试控制台中显示一条错误消息，提示：

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) {
    print(count);
    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();
    count = widget.count;
    open2 = 'open$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(
            child: Center(child: Text('New page')),
          )),
      onTap: () {
        Navigator.pop(context);
      },
    );
  }
}

任何人都需要帮助吗？

Answer 1

代替构建-List.generate的构建。只需直接在RCard

中传递PageView.builder

工作代码：

 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) {
        print(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 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();
        count = widget.count;
        open2 = 'open$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(
                child: Center(child: Text('New page')),
              )),
          onTap: () {
            Navigator.pop(context);
          },
        );
      }
    }

如何使用Hero在多个按钮之间具有相同的页面目标

1 个答案: