dart Flutter listview.builder在调用setstate后不更新小部件

t98cgbkg  于 2023-09-28  发布在  Flutter
关注(0)|答案(1)|浏览(199)

我试图使它在那里我可以使一个窗口小部件(容器)显示默认情况下,和一个不同的一个取代该窗口小部件每当用户悬停该地区。但是,这些项是在listview.builder中生成的,我已经尝试了很多不同的方法来使其工作。我提供了一个我觉得是最低限度可重复的例子。我知道有点过了,我只是想确定我没有错过什么。

class MyPage extends StatefulWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  void initstate() {
    super.initState();
    setState(() {});
  }

  Map currentRankings = {0: {"Test": "Testing"}}

  @override
  Widget build(BuildContext context) {
    globals.getScreenSize(context);
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: [
            SingleChildScrollView(
              child: Container(
                child: Column(
                  children: [
                    if (currentRankings.length != 0)
                      Container(
//Here is my list view
                        child: ListView.builder(
                            shrinkWrap: true,
                            itemCount: currentRankings.length,
                            itemBuilder: (context, index) {
                  
                              bool isHovered = false;

                              return Container(
                                width: globals.maxwidth * 0.1,
                                child: MouseRegion(
                                  onEnter: (_) {
                                    isHovered = true;
                                    setState(() {
                                      isHovered;
                                    });
                                  },
                                  onExit: (_) {
                                    isHovered = false;
                                    setState(() {
                                      isHovered;
                                    });
                                  },
                                  child: Stack(
                                    children: [
                                      AnimatedOpacity(
                                        opacity: isHovered ? 0.0 : 1.0,
                                        duration: Duration(milliseconds: 200),
                                        child: Container(
                                          width: globals.maxwidth * 0.6,
                                          color: Colors.amber,
                                        ),
                                      ),
                                      AnimatedOpacity(
                                        opacity: isHovered ? 1.0 : 0.0,
                                        duration: Duration(milliseconds: 200),
                                        child: Container(
                                          width: globals.maxwidth * 0.6,
                                          color: Colors.blue,
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              );
                            }),
                      ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

我知道bool isHovered对于listview中的每个小部件都有不同的变化,但我也尝试过动态命名它,并在每次更新时调用特定的bool,这也没有解决这个问题。

6mw9ycah

6mw9ycah1#

将列表项移动到单独的类中。您也不希望在状态更改时重新构建Material应用。你可以把它移上去。

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        theme: ThemeData(useMaterial3: true),
        home: const MyPage());
  }
}

class MyPage extends StatefulWidget {
  const MyPage({super.key});

  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  void initstate() {
    super.initState();
  }

  Map currentRankings = {
    0: {"Test": "Testing"}
  };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            children: [
              if (currentRankings.isNotEmpty)
                ListView.builder(
                    shrinkWrap: true,
                    itemCount: currentRankings.length,
                    itemBuilder: (context, index) {
                      return SizedBox(
                          width: MediaQuery.of(context).size.width * 0.4,
                          child: const ListItem());
                    }),
            ],
          ),
        ),
      ),
    );
  }
}

class ListItem extends StatefulWidget {
  const ListItem({super.key});

  @override
  State<ListItem> createState() => _ListItemState();
}

class _ListItemState extends State<ListItem> {
  late bool isHovered;
  @override
  void initState() {
    isHovered = false;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (_) {
        setState(() {
          isHovered = true;
        });
      },
      onExit: (_) {
        setState(() {
          isHovered = false;
        });
      },
      child: Stack(
        children: [
          AnimatedOpacity(
            opacity: isHovered ? 0.0 : 1.0,
            duration: const Duration(milliseconds: 200),
            child: Container(
              width: MediaQuery.of(context).size.width * 0.6,
              height: 100,
              color: Colors.amber,
            ),
          ),
          AnimatedOpacity(
            opacity: isHovered ? 1.0 : 0.0,
            duration: const Duration(milliseconds: 200),
            child: Container(
              width: MediaQuery.of(context).size.width * 0.6,
              height: 100,
              color: Colors.blue,
            ),
          ),
        ],
      ),
    );
  }
}

相关问题