我是 Flutter 的新手，我正在与 SetState 操作绑定，我正在尝试以块的方式组织代码，但 setState 不起作用，

Question

这是我正在使用的代码，我在 lib 文件夹中创建了一个名为 HomePage 的新文件夹，并将我的 Home.dart 文件放在那里，一切都很好，直到我进入 setState。 setState 根本不起作用。

Main.Dart 代码

import 'package:flutter/material.dart';
import 'package:test_project1/HomePage/Home.dart';

main() => runApp(new DarkX());

class DarkX extends StatefulWidget {

    @override
  State<StatefulWidget> createState() {
    return new DarkXState();
  }

}

class DarkXState extends State<DarkX>{

@override
  Widget build(BuildContext context) {
    var home = new DarkXAppHomePage().createHomePage();
    return home;
  }

} 

Home.Dart 代码 `

import 'package:flutter/material.dart';

class DarkXAppHomePage {

    var _isLoading = true;

    createHomePage(){
        var homePageScaffold = createHomePageScaffold();
        return MaterialApp(home: homePageScaffold, debugShowCheckedModeBanner: false);
    }


    //Scaffold For Home Page
    createHomePageScaffold(){
      var homeAppbar = homeAppBar();
      var homebody = homeBody();
      var scaffold = new Scaffold(appBar: homeAppbar, body: homebody,);
      return scaffold;
    }

    //AppBar For Home Page
    homeAppBar(){
      var text = createText('Welcome');
      var refreshbutton = refreshButton(refreshHomePage);
      var appBar = new AppBar(title: text,actions: <Widget>[refreshbutton],);
      return appBar;
    }

    //Body For Home Page
    homeBody(){
      var loadingState = _isLoading ? CircularProgressIndicator() : createText('Finished Loading');
      return new Center(child: loadingState);
    }

    refreshButton(Function onPress){
      var refreshicon = refreshIcon();
      var refreshbutton = new IconButton(icon: refreshicon, onPressed: (){
        onPress();
      },);
      return refreshbutton;
    }

    //homepage Refresh Action
    refreshHomePage(){
      setState(){
        _isLoading = false;
      }
    }

    //Create Text
    createText( String text ){
      var newText = new Text(text);
      return newText;
    }

    //Refresh Icon
    refreshIcon(){
      var refreshicon = new Icon(Icons.refresh);
      return refreshicon;
    }

}

现在，当我在 refreshHomePage 函数中使用 setState 时，它​​不起作用并出现警告“未引用声明 'setState'。 尝试删除 'setState'.dart(unused_element)" 的声明。请有任何建议。 任何帮助表示赞赏。

Answer 1

您应该记住的第一件事是setState() 方法是State<E extends StatefulWidget> 类的方法。根据您的源代码，您正在调用DarkXAppHomePage 类的setState() 方法。 DarkXAppHomePage 类不是State 类和State 的子类。因此，您的代码不起作用。您的 setState() 方法也执行错误。您的解决方案，我建议您 2 个步骤。

第一步，你应该再仔细阅读this docs。

第二步，我会帮你一步步修改你的源码。

第 1 步：您的原始来源。

class DarkXAppHomePage {
  var _isLoading = true;

  createHomePage(){
    var homePageScaffold = createHomePageScaffold();
    return MaterialApp(home: homePageScaffold, debugShowCheckedModeBanner: false);
  }


  //Scaffold For Home Page
  createHomePageScaffold(){
    var homeAppbar = homeAppBar();
    var homebody = homeBody();
    var scaffold = new Scaffold(appBar: homeAppbar, body: homebody,);
    return scaffold;
  }

  //AppBar For Home Page
  homeAppBar(){
    var text = createText('Welcome');
    var refreshbutton = refreshButton(refreshHomePage);
    var appBar = new AppBar(title: text,actions: <Widget>[refreshbutton],);
    return appBar;
  }

  //Body For Home Page
  homeBody(){
    var loadingState = _isLoading ? CircularProgressIndicator() : createText('Finished Loading');
    return new Center(child: loadingState);
  }

  refreshButton(Function onPress){
    var refreshicon = refreshIcon();
    var refreshbutton = new IconButton(icon: refreshicon, onPressed: (){
      onPress();
    },);
    return refreshbutton;
  }

  //homepage Refresh Action
  refreshHomePage(){
    setState(){
      _isLoading = false;
    } // ★ => Look at this, wrong implement. You have to put a method as `setState()` parameter instead of write a new `setState()` method liked that.
  }

  //Create Text
  createText( String text ){
    var newText = new Text(text);
    return newText;
  }

  //Refresh Icon
  refreshIcon(){
    var refreshicon = new Icon(Icons.refresh);
    return refreshicon;
  }

}

第 2 步：将其缩短以使其易于阅读。 （可能不太容易理解。不过我们会尽快更新。）。

class DarkXAppHomePage {  
  var _isLoading = true;

  createHomePage() => MaterialApp(home: createHomePageScaffold(), debugShowCheckedModeBanner: false);

  //Scaffold For Home Page
  createHomePageScaffold() => Scaffold(appBar: homeAppBar(), body: homeBody());

  //AppBar For Home Page
  homeAppBar() => AppBar(title: createText('Welcome'), actions: <Widget>[refreshButton(refreshHomePage)]);

  //Body For Home Page
  homeBody() => Center(child: _isLoading ? CircularProgressIndicator() : createText('Finished Loading'));

  refreshButton(Function onPress) => IconButton(icon: refreshIcon(), onPressed: () => onPress());

  //homepage Refresh Action
  refreshHomePage() => setState(() => _isLoading = false); // ★ => `() => _isLoading = false` is the short way represent an anonymous method. You put this anonymous method as a parameter of `setState()`

  //Create Text
  createText(String text) => Text(text);

  //Refresh Icon
  refreshIcon() => Icon(Icons.refresh);

}

第 3 步：现在，休息一下。您必须创建一个包含 _isLoading 属性的 StatefulWidget。

class DarkXAppHomePage extends StatefulWidget {
  var _isLoading = true;

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

class _DarkXAppHomePageState extends State<DarkXAppHomePage> {
  //homepage Refresh Action
  refreshHomePage() => setState(() => widget._isLoading = false); // ★ => Just look at this. It have a obscure technique here. If you have right impelement which detail here (https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html), Flutter framework auto put the instance of your `DarkXAppHomePage` inside `_DarkXAppHomePageState` with the named `widget`. As you see, the `_DarkXAppHomePageState` force state of `State<DarkXAppHomePage>` and `DarkXAppHomePage` have `createState()` method which provided `_DarkXAppHomePageState`.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //Scaffold For Home Page
      home: Scaffold(
        //AppBar For Home Page
        appBar: AppBar(
          //Create Text
          title: Text('Welcome'),
          actions: <Widget>[
            IconButton(
              //Refresh Icon
              icon: Icon(Icons.refresh),
              onPressed: () => refreshHomePage,
            ),
          ],
        ),
        body: Center(
          child: widget._isLoading ? CircularProgressIndicator() : Text('Finished Loading'),
        ),
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}

第 4 步：将您的 DarkXAppHomePage 连接到 main。

main() => runApp(DarkX());

class DarkX extends StatelessWidget {
  @override
  Widget build(BuildContext context) => DarkXAppHomePage();
}

我在没有 IDE 的情况下编写了这段代码，所以如果我有任何拼写错误，请随时帮我修复它。

Answer 2

你可以在将函数传递给另一个小部件时使用回调函数

Widget refreshButton(VoidCallBack onPress){
  Widget refreshicon = refreshIcon();
  Widget refreshbutton = new IconButton(icon: refreshicon, onPressed: onPress,);
  return refreshbutton;
}

您的代码看起来过度设计，也许简化的东西使其易于理解。并且始终将类型声明为一个好习惯。

Answer 3

它会像这样工作，也许是我，但很难按照你的方式遵循你的代码。

setState 必须在 statefullWidget 内部，或者从那里作为参数发送。

import 'package:flutter/material.dart';

main() => runApp(new DarkX());

class DarkX extends StatefulWidget {
  @override
  _DarkXState createState() => _DarkXState();
}

class _DarkXState extends State<DarkX> {
  var _isLoading = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: createHomePageScaffold(), debugShowCheckedModeBanner: false);
  }

  //Scaffold For Home Page
  createHomePageScaffold() {
    var homeAppbar = homeAppBar();
    var homebody = homeBody();
    var scaffold = new Scaffold(
      appBar: homeAppbar,
      body: homebody,
    );
    return scaffold;
  }

  //AppBar For Home Page
  homeAppBar() {
    var text = createText('Welcome');
    var refreshbutton = refreshButton(refreshHomePage);
    var appBar = new AppBar(
      title: text,
      actions: <Widget>[refreshbutton],
    );
    return appBar;
  }

  //Body For Home Page
  homeBody() {
    var loadingState = _isLoading
        ? CircularProgressIndicator()
        : createText('Finished Loading');
    return new Center(child: loadingState);
  }

  refreshButton(Function onPress) {
    var refreshicon = refreshIcon();
    var refreshbutton = new IconButton(
      icon: refreshicon,
      onPressed: () {
        onPress();
      },
    );
    return refreshbutton;
  }

  //homepage Refresh Action
  refreshHomePage() {
    setState(() {
      _isLoading = false;
    });
  }

  //Create Text
  createText(String text) {
    var newText = new Text(text);
    return newText;
  }

  //Refresh Icon
  refreshIcon() {
    var refreshicon = new Icon(Icons.refresh);
    return refreshicon;
  }
}