logo标签列表

从有状态的小部件更新无状态的小部件

flutterdartflutter-state
3

Main.dart:

import 'package:flutter/material.dart';
import 'package:mypackage/widgets/home_widget.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "My App",
      theme: ThemeData(primarySwatch: Colors.blueGrey),
      home: Home(),
    );
  }
}

Home.dart:

import 'package:flutter/material.dart';
import 'package:mypackage/widgets/secondary_page.dart';
import 'package:mypackage/widgets/home_view.dart';
import 'package:mypackage/widgets/settings_page.dart';

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomeState();
  }
}

class _HomeState extends State<Home> {
  int currentPageIndex = 0;
  final List<Widget> pageWidgets = [HomeView(), SecondaryPage(), SettingsPage()];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("My App"),
          centerTitle: true,
        ),
        body: pageWidgets[currentPageIndex],
        bottomNavigationBar: BottomNavigationBar(
          onTap: onTabTapped,
          currentIndex: currentPageIndex,
          items: [
            BottomNavigationBarItem(
                icon: new Icon(Icons.home), label: "Tab One"),
            BottomNavigationBarItem(
                icon: new Icon(Icons.account_balance), label: "Tab Two"),
            BottomNavigationBarItem(
                icon: new Icon(Icons.settings), label: "Tab Three"),
          ],
        ),
        floatingActionButton: FloatingActionButton(onPressed: () {
          // Update data from here
          HomeView().updateDisplay();
        }));
  }

  // Changes the index when the tapped page has loaded
  void onTabTapped(int index) {
    setState(() {
      currentPageIndex = index;
    });
  }
}

HomeView.dart:

import 'package:flutter/material.dart';
import 'package:mypackage/models/mydisplay.dart';
import 'package:mypackage/network/mydata.dart';

class HomeView extends StatelessWidget {
  final List<MyDisplay> dataList = [
    new MyDisplay("Sample Display",
        "SampleFile", 0),
  ];

  Future<void> updateDisplay() async {
    MyData myData = new MyData();

    dataList.forEach((d) async {
      d.changePercentage = await myData
          .getDataPercentage("assets/data/" + d.fileName + ".xml");

      print(d.dataName +
          " change percentage: " +
          d.changePercentage.toString() +
          "%");
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: new ListView.builder(
          itemCount: dataList.length,
          itemBuilder: (BuildContext context, int index) =>
              buildCard(context, index)),
    );
  }

  Widget buildCard(BuildContext context, int index) {
    return Container(
        child: Card(
            color: Colors.teal.shade200,
            child: Padding(
                padding: const EdgeInsets.all(25),
                child: Column(children: <Widget>[
                  Text(dataList[index].dataName,
                      style: new TextStyle(
                          fontSize: 20, fontWeight: FontWeight.bold)),
                  Text(dataList[index].changePercentage.toString() + "%")
                ]))));
  }
}

当我从floatingActionButton调用updateDisplay()方法时，它按预期工作，数据被打印到控制台，但似乎没有更新实际的UI，卡片的内容仍然保持在它们最初的设置值。
澄清一下：如何从有状态的小部件中更新列表视图内（在无状态小部件内）卡片的内容？
如果这是重复问题，我很抱歉，我已经寻找答案并继续寻找，但我只是无法让它工作。
5个回答
5

由于无法更新无状态小部件，因此需要使用有状态小部件。请查看此链接以获取更多信息。下一个问题可以通过使用globalKeys来解决。唯一奇怪的地方是您必须将Home有状态小部件和HomeView有状态小部件保留在同一个dart文件中。尝试使用以下代码使其工作。

主页视图

import 'package:flutter/material.dart';
import 'package:mypackage/widgets/secondary_page.dart';
import 'package:mypackage/widgets/settings_page.dart';
import 'package:mypackage/models/mydisplay.dart';
import 'package:mypackage/network/mydata.dart';

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomeState();
  }
}

class _HomeState extends State<Home> {
  int currentPageIndex = 0;
  final List<Widget> pageWidgets = [HomeView(), SecondaryPage(), SettingsPage()];
  GlobalKey<_HomeViewState> _myKey = GlobalKey();// We declare a key here
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("My App"),
          centerTitle: true,
        ),
        body: pageWidgets[currentPageIndex],
        bottomNavigationBar: BottomNavigationBar(
          onTap: onTabTapped,
          currentIndex: currentPageIndex,
          items: [
            BottomNavigationBarItem(
                icon: new Icon(Icons.home), label: "Tab One"),
            BottomNavigationBarItem(
                icon: new Icon(Icons.account_balance), label: "Tab Two"),
            BottomNavigationBarItem(
                icon: new Icon(Icons.settings), label: "Tab Three"),
          ],
        ),
        floatingActionButton: FloatingActionButton(onPressed: () {
          // Update data from here
          _myKey.currentState.updateDisplay();//This is how we call the function
        }));
  }

  // Changes the index when the tapped page has loaded
  void onTabTapped(int index) {
    setState(() {
      currentPageIndex = index;
    });
  }
}

class HomeView extends StatefulWidget {
  Function updateDisplay;
  HomeView({Key key}): super(key: key);//This key is what we use
  @override
  _HomeViewState createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {
  final List<MyDisplay> dataList = [
    new MyDisplay("Sample Display",
        "SampleFile", 0),
  ];

@override
  void initState(){
    super.initState();
    widget.updateDisplay = () async {
      MyData myData = new MyData();

      dataList.forEach((d) async {
        d.changePercentage = await myData
            .getDataPercentage("assets/data/" + d.fileName + ".xml");
        print(d.dataName +
            " change percentage: " +
            d.changePercentage.toString() +
            "%");
      });
      setState((){});//This line rebuilds the scaffold
    };
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: new ListView.builder(
          itemCount: dataList.length,
          itemBuilder: (BuildContext context, int index) =>
              buildCard(context, index)),
    );
  }

  Widget buildCard(BuildContext context, int index) {
    return Container(
        child: Card(
            color: Colors.teal.shade200,
            child: Padding(
                padding: const EdgeInsets.all(25),
                child: Column(children: <Widget>[
                  Text(dataList[index].dataName,
                      style: new TextStyle(
                          fontSize: 20, fontWeight: FontWeight.bold)),
                  Text(dataList[index].changePercentage.toString() + "%")
                ]))));
  }
}

我们使用setState((){})来重建小部件。只需要记住一件事情。无论您在何处使用updateDisplay方法，都不要在重建后使其运行循环。例如，您将其用于子级内的future builder。这样它将保持重建。
编辑
我们向HomeView添加了一个key，现在我们可以像这样使用该key：_myKey.currentState.yourFunction。希望我能帮到你。
1
哦，让我想想如何解决这个问题。我会添加另一个评论来告诉你我完成了的时候。 - undefined
@AdamBrodin 我已经完成了。请检查一下是否有效。我正在添加解释。 - undefined
1
哦，我觉得当这样调用时，initState() 方法不会运行。还有一种使用 keys 的方法，但是比较复杂，所以等我弄清楚了再发帖解释。 - undefined
"_HomeViewState 不是一种类型，因此不能用作类型参数。" - undefined
当我尝试定义_myKey时，GlobalKey<_HomeViewState> - undefined
显示剩余4条评论
2
虽然我理解您想要实现的目标，但我认为这将违背“Flutter方式”。您可以使用键值（key）来实现所需的结果，但我认为将状态提升到小部件树更容易、更符合习惯用法。您可以在文档这里中阅读相关内容。
因此，在您的情况下，您可能需要将其更改为：
class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomeState();
  }
}

class _HomeState extends State<Home> {
  int currentPageIndex = 0;
  // Added this line
  List<MyDisplay> dataList = [
    new MyDisplay("Sample Display",
        "SampleFile", 0),
  ];

  final List<Widget> pageWidgets; 

  // moved the update function from HomeView to here
  Future<void> updateDisplay() async {
    MyData myData = new MyData();

    dataList.forEach((d) async {
      d.changePercentage = await myData
          .getDataPercentage("assets/data/" + d.fileName + ".xml");

      print(d.dataName +
          " change percentage: " +
          d.changePercentage.toString() +
          "%");
    });
    setState((){});
  }

  @override
  Widget build(BuildContext context) {
    pageWidgets = [HomeView(dataList: dataList), SecondaryPage(), SettingsPage()]

    return Scaffold(
        appBar: AppBar(
          title: Text("My App"),
          centerTitle: true,
        ),
        body: pageWidgets[currentPageIndex],
        bottomNavigationBar: BottomNavigationBar(
          onTap: onTabTapped,
          currentIndex: currentPageIndex,
          items: [
            BottomNavigationBarItem(
                icon: new Icon(Icons.home), label: "Tab One"),
            BottomNavigationBarItem(
                icon: new Icon(Icons.account_balance), label: "Tab Two"),
            BottomNavigationBarItem(
                icon: new Icon(Icons.settings), label: "Tab Three"),
          ],
        ),
        floatingActionButton: FloatingActionButton(onPressed: () {
          updateDisplay();
        }));
  }

  // Changes the index when the tapped page has loaded
  void onTabTapped(int index) {
    setState(() {
      currentPageIndex = index;
    });
  }
}

然后对于您的HomeView小部件：
class HomeView extends StatelessWidget {
  HomeView({this.dataList});

  final List<MyDisplay> dataList;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: new ListView.builder(
          itemCount: dataList.length,
          itemBuilder: (BuildContext context, int index) =>
              buildCard(context, index)),
    );
  }

  Widget buildCard(BuildContext context, int index) {
    return Container(
        child: Card(
            color: Colors.teal.shade200,
            child: Padding(
                padding: const EdgeInsets.all(25),
                child: Column(children: <Widget>[
                  Text(dataList[index].dataName,
                      style: new TextStyle(
                          fontSize: 20, fontWeight: FontWeight.bold)),
                  Text(dataList[index].changePercentage.toString() + "%")
                ],
              ),
            ),
          ),
        );
  }
}

我还没有测试这是否有效。稍后我可能会进行一些测试。
0

请按照以下方式更新您的 home.dart 文件。

import 'package:flutter/material.dart';
import 'package:mypackage/widgets/secondary_page.dart';
import 'package:mypackage/widgets/home_view.dart';
import 'package:mypackage/widgets/settings_page.dart';

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomeState();
  }
}

class _HomeState extends State<Home> {
  int currentPageIndex = 0;
  Widget _homeView = HomeView();
  final List<Widget> pageWidgets = [_homeView, SecondaryPage(), SettingsPage()];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("My App"),
          centerTitle: true,
        ),
        body: pageWidgets[currentPageIndex],
        bottomNavigationBar: BottomNavigationBar(
          onTap: onTabTapped,
          currentIndex: currentPageIndex,
          items: [
            BottomNavigationBarItem(
                icon: new Icon(Icons.home), label: "Tab One"),
            BottomNavigationBarItem(
                icon: new Icon(Icons.account_balance), label: "Tab Two"),
            BottomNavigationBarItem(
                icon: new Icon(Icons.settings), label: "Tab Three"),
          ],
        ),
        floatingActionButton: FloatingActionButton(onPressed: () {
          // Update data from here
          _homeView.updateDisplay();
        }));
  }

  // Changes the index when the tapped page has loaded
  void onTabTapped(int index) {
    setState(() {
      currentPageIndex = index;
    });
  }
}

home_view.dart如下所示

import 'package:flutter/material.dart';
import 'package:mypackage/models/mydisplay.dart';
import 'package:mypackage/network/mydata.dart';

class HomeView extends StatelessWidget {
  final List<MyDisplay> dataList = [
    new MyDisplay("Sample Display",
        "SampleFile", 0),
  ];

  Future<void> updateDisplay() async {
    MyData myData = new MyData();

    dataList.forEach((d) async {
      d.changePercentage = await myData
          .getDataPercentage("assets/data/" + d.fileName + ".xml");

      print(d.dataName +
          " change percentage: " +
          d.changePercentage.toString() +
          "%");
    });
     setState((){});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: new ListView.builder(
          itemCount: dataList.length,
          itemBuilder: (BuildContext context, int index) =>
              buildCard(context, index)),
    );
  }

  Widget buildCard(BuildContext context, int index) {
    return Container(
        child: Card(
            color: Colors.teal.shade200,
            child: Padding(
                padding: const EdgeInsets.all(25),
                child: Column(children: <Widget>[
                  Text(dataList[index].dataName,
                      style: new TextStyle(
                          fontSize: 20, fontWeight: FontWeight.bold)),
                  Text(dataList[index].changePercentage.toString() + "%")
                ]))));
  }
}
你在pageWidgets和floatingActionButton中创建了两个HomeView实例。 - undefined
0
你需要将你的HomeView转换成一个StatefulWidget。
之后，你需要将updateDisplay修改为这样：
Future<void> updateDisplay() async {
    MyData myData = new MyData();

    dataList.forEach((d) async {
      d.changePercentage = await myData
          .getDataPercentage("assets/data/" + d.fileName + ".xml");

      print(d.dataName +
          " change percentage: " +
          d.changePercentage.toString() +
          "%");
    });
    
    setState(() {});
  }

通过调用setState(() {});，您会在StatefulWidget内部调用build方法。 编辑 将您的HomeView更改为以下内容：
class HomeView extends StatefulWidget {
  final List<MyDisplay> dataList = [
    new MyDisplay("Sample Display",
        "SampleFile", 0),
  ];

  Future<void> updateDisplay() async {
    MyData myData = new MyData();

    dataList.forEach((d) async {
      d.changePercentage = await myData
          .getDataPercentage("assets/data/" + d.fileName + ".xml");

      print(d.dataName +
          " change percentage: " +
          d.changePercentage.toString() +
          "%");
    });
  }
  @override
  _HomeViewState createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: new ListView.builder(
          itemCount: widget.dataList.length,
          itemBuilder: (BuildContext context, int index) =>
              buildCard(context, index)),
    );
  }

  Widget buildCard(BuildContext context, int index) {
    return Container(
        child: Card(
            color: Colors.teal.shade200,
            child: Padding(
                padding: const EdgeInsets.all(25),
                child: Column(children: <Widget>[
                  Text(widget.dataList[index].dataName,
                      style: new TextStyle(
                          fontSize: 20, fontWeight: FontWeight.bold)),
                  Text(widget.dataList[index].changePercentage.toString() + "%")
                ]))));
  }
}

而你的主页就像这样：

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomeState();
  }
}

class _HomeState extends State<Home> {
  int currentPageIndex = 0;
  HomeView _homeView = HomeView();
  List<Widget> pageWidgets = [_homeView, SecondaryPage(), SettingsPage()];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("My App"),
          centerTitle: true,
        ),
        body: pageWidgets[currentPageIndex],
        bottomNavigationBar: BottomNavigationBar(
          onTap: onTabTapped,
          currentIndex: currentPageIndex,
          items: [
            BottomNavigationBarItem(
                icon: new Icon(Icons.home), label: "Tab One"),
            BottomNavigationBarItem(
                icon: new Icon(Icons.account_balance), label: "Tab Two"),
            BottomNavigationBarItem(
                icon: new Icon(Icons.settings), label: "Tab Three"),
          ],
        ),
        floatingActionButton: FloatingActionButton(onPressed: () {
          // Update data from here
          _homeView.updateDisplay();
        }));
  }

  // Changes the index when the tapped page has loaded
  void onTabTapped(int index) {
    setState(() {
      currentPageIndex = index;
    });
  }
}
将HomeView转换为StatefulWidget后，我无法再从home_widget.dart中调用updateDisplay()函数。 - undefined
嗯，我觉得你这里需要用静态方法，看看我的修改！ - undefined
静态不起作用。我们需要使用小部件，就像我在我的答案中使用的那样。 - undefined
@SiddharthAgrawal 这是真的。我写了一个新的解决方案！ - undefined
那是我的解决方案。你不能抄袭别人的解决方案。顺便说一句，根据亚当·布罗丁的说法，它并没有起作用。我有一个新的解决方案，使用密钥。 - undefined
@SiddharthAgrawal 对不起，我没看到。我们可能得出了相同的结论。 - undefined
0
你需要在HomeView().updateDisplay();之后调用setState(() {});。
现在试了一下，界面还是没有更新。 - undefined
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接