flutter - 如何在颤动中使用轮播和英雄？

Question

我正在尝试制作动画节目书签。就像这个网站上的例子一样。原来的例子太复杂了。所以我放了flutter doc例子中的部分代码。学习最简单的动画。我在两个英雄中都放了相同的标签，但仍然错误。

请帮帮我。谢谢！

对不起，我的英语很差。

Center(
    child: FutureBuilder(
      future: fetchData('querySdiList'),
      builder: (context, qS) {
        if (qS.hasData) {
          return CarouselSlider.builder(
            itemCount: qS.data.length,
            itemBuilder: (BuildContext context, int itemIndex, int i) {
              final list = qS.data[itemIndex];
              sdiId = list['sdiId'];
              print('carousel:' + sdiId.toString());
              return Center(
                  child: SizedBox(
                      width: 300,
                      child: Hero(
                          tag: sdiId.toString(),
                          child: Material(
                            child: InkWell(
                              onTap: () {
                                // Navigator.pushNamed(context, '/BookMarkPage');

                                Navigator.of(context).push(
                                    MaterialPageRoute<void>(
                                        builder: (BuildContext context) {
                                  print('Hero:' + sdiId.toString());
                                  return Container(
                                      // Set background to blue to emphasize that it's a new route.
                                      color: Colors.lightBlueAccent,
                                      padding: const EdgeInsets.all(16.0),
                                      alignment: Alignment.topLeft,
                                      child: SizedBox(
                                        width: 100,
                                        child: Hero(
                                          tag: sdiId.toString(),
                                          child: Material(
                                            color: Colors.transparent,
                                            child: InkWell(
                                              onTap: () {},
                                              child: Image.network(
                                                _image[0],
                                                fit: BoxFit.contain,
                                              ),
                                            ),
                                          ),
                                        ),
                                      ));
                                }));
                              },
                              child: Container(
                                height:
                                    MediaQuery.of(context).size.height / 2,
                                decoration: BoxDecoration(
                                  boxShadow: [
                                    BoxShadow(
                                      offset: Offset(0, 10),
                                      color: Colors.grey.withOpacity(0.5),
                                      spreadRadius: 5,
                                      blurRadius: 10,
                                    )
                                  ],
                                ),
                                margin: EdgeInsets.all(5.0),
                                child: Stack(
                                  alignment: Alignment.bottomLeft,
                                  children: <Widget>[
                                    ClipRRect(
                                      borderRadius: BorderRadius.all(
                                          Radius.circular(15)),
                                      child: Container(
                                        height: MediaQuery.of(context)
                                                .size
                                                .height /
                                            2,
                                        decoration: BoxDecoration(
                                          image: DecorationImage(
                                              fit: BoxFit.cover,
                                              image: NetworkImage(_image[
                                                  Random().nextInt(
                                                      _image.length)])),
                                        ),
                                      ),
                                    ),
                                    Container(
                                      height: MediaQuery.of(context)
                                          .size
                                          .height,
                                      decoration: BoxDecoration(
                                        borderRadius: BorderRadius.all(
                                            Radius.circular(15)),
                                        color: Colors.white,
                                        gradient: LinearGradient(
                                          begin: FractionalOffset.topCenter,
                                          end: FractionalOffset.bottomLeft,
                                          colors: [
                                            Colors.transparent,
                                            Colors.black,
                                          ],
                                          stops: [0.0, .85],
                                        ),
                                      ),
                                    ),
                                    Container(
                                      padding: EdgeInsets.all(10),
                                      child: RichText(
                                        text: TextSpan(
                                          text: '${list['sdiName']}',
                                          style: TextStyle(
                                              fontSize: 50,
                                              color: Colors.white),
                                        ),
                                      ),
                                      height: MediaQuery.of(context)
                                              .size
                                              .height /
                                          8,
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ))));
            },
            options: CarouselOptions(
              aspectRatio: 2,
              autoPlay: true,
              enlargeCenterPage: true,
              height: MediaQuery.of(context).size.height,
            ),
          );
        } else if (qS.hasError) {
          return qS.error;
        }
        return CircularProgressIndicator();
      },
    ),
  ),

错误

There are multiple heroes that share the same tag within a subtree.

标签： flutterdartanimationflutter-animationflutter-futurebuilder

Answer 1

您正在使用 carouselBuilder 创建多个小部件，并且每个小部件都获得相同的标签，您不能这样做，标签是告诉 Hero 小部件它应该动画到的位置。

问题似乎在这里

      final list = qS.data[itemIndex];
      sdiId = list['sdiId'];

尝试将英雄标签设置为这样

tag: qS.data[itemIndex]['sdiId']

这应该给每个英雄sdiIditemIndex 防止他们拥有相同的