flutter - 我是 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) 的声明”。任何建议请。任何帮助表示赞赏。

标签： flutterdart

Answer 1

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

第一步，您应该再次仔细阅读此文档。

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

第 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步：现在，休息一下。您必须创建一个StatefulWidget包含_isLoading属性。

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() => runApp(DarkX());

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

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