PageView更改当前位置时状态未更新

时间:2020-03-05 04:24:53

标签: flutter

我是Flutter的新成员。 我创建一个PageView,当页面更改位置时,我需要更新文本。 这是我的代码:

import 'dart:math';

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PageViewDemo(),
    );
  }
}

class PageViewDemo extends StatefulWidget {
  @override
  _PageViewDemoState createState() => _PageViewDemoState();
}

class _PageViewDemoState extends State<PageViewDemo> {
  List<String> _storyList = [];
  double currentPage = 0;
  PageController pageController = PageController(initialPage: 0);

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _storyList.add("1");
    _storyList.add("2");
    _storyList.add("3");
    _storyList.add("4");
    _storyList.add("5");
    pageController.addListener(() {
      setState(() {
        currentPage = pageController.page;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 30),
      color: Colors.red.withOpacity(0.4),
      height: 450,
      child: Stack(
        children: <Widget>[
          Cards(
            currentPage: currentPage,
            data: _storyList[0],
          ),
          PageView.builder(
            itemCount: _storyList.length,
            itemBuilder: (context, idx) {
              return Container(
                color: Color(Random().nextInt(0xffffffff)),
                child: Center(
                  child: Text(
                    "pos=$currentPage",
                    style: TextStyle(color: Colors.red),
                  ),
                ),
              );
            },
          )
        ],
      ),
    );
  }
}

class Cards extends StatefulWidget {
  String data;
  double currentPage;

  Cards({Key key, this.currentPage, this.data}) : super(key: key);

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

class _CardsState extends State<Cards> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    double pos = widget.currentPage;
    return Container(
      child: Text(
        "pos= $pos",
        style: TextStyle(
          fontSize: 20,
          color: Colors.white,
          fontWeight: FontWeight.w700,
        ),
      ),
    );
  }
}
当我运行应用程序时,代码的位置始终为0.0。怎么了? 在类Cards中,我有一个警告:该类(或该类继承的类)被标记为“ @immutable”,但其一个或多个实例字段不是最终的:Cards.data, Cards.currentPage-第78行。我该如何解决? 请帮我。谢谢!

1 个答案:

答案 0 :(得分:1)

只需将控制器分配给您的综合浏览量就可以了。

在您的构建方法中,将您的PageView.builder更改为

PageView.builder(
    contorller:pageController
    // your other properties as it is 
)

因为您已将侦听器添加到PageViewController。但是,您尚未将其分配给适当的小部件。

因此,通过赋予该控制器属性,您将能够实现您的功能。