flutter - 即使我创建了有状态小部件，为什么没有定义函数 setState()？

Question

我正在尝试通过单击图标来更改一个组件的位置。在尝试通过setState()方法更改图标的状态时，我收到一个错误，说明setState()方法未在小部件仪表板中定义。

代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
final Color backgroundColor = Color(0xFF4A4A58);

class MenuDashBoard extends StatefulWidget {
  @override
  _MenuDashBoardState createState() => _MenuDashBoardState();
}

class _MenuDashBoardState extends State<MenuDashBoard> {
  bool isCollapsed = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: backgroundColor,
      body: Stack(
        children: <Widget>[
          menu(context),
          dashboard(context)
        ],
      ),

    );
  }
}

Widget menu(context){
  return Padding(
    padding: const EdgeInsets.all(8.0),
    child: Align(
      alignment: Alignment.centerLeft,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            "Dashboard ",
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
          SizedBox(height: 10,),
          Text(
            "Messages ",
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
          SizedBox(height: 10,),
          Text(
            "Utility Bills ",
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
          SizedBox(height: 10,),
          Text(
            "Funds Transfer",
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
          SizedBox(height: 10,),
          Text(
            "Branches",
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
        ],),
    ),
  );
}

Widget dashboard (context){
  return Material(
    elevation: 8,
    color: backgroundColor,
    child: Container(
      padding: const EdgeInsets.only(left: 16, right: 16, top: 48),
      child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            mainAxisSize:MainAxisSize.max,
            children: <Widget>[
            InkWell(
              child: Icon(Icons.menu, color: Colors.white),
              onTap: (){
                setState()// Here is the error with a red underline, The function setState is not defined.
              },
            ),

            Text("My Cards", style: TextStyle(fontSize: 24,color: Colors.white),),
            Icon(Icons.settings, color: Colors.white)
          ],),
        ],
      ),
    ),
  );
}

标签： flutter

Answer 1

您应该将所有小部件功能放在小部件构建中。

final Color backgroundColor = Color(0xFF4A4A58);

class MenuDashBoard extends StatefulWidget {
  @override
  _MenuDashBoardState createState() => _MenuDashBoardState();
}

class _MenuDashBoardState extends State<MenuDashBoard> {
  bool isCollapsed = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: backgroundColor,
      body: Stack(
        children: <Widget>[menu(context), dashboard(context)],
      ),
    );
  }

  Widget dashboard(context) {
    return Material(
      elevation: 8,
      color: backgroundColor,
      child: Container(
        padding: const EdgeInsets.only(left: 16, right: 16, top: 48),
        child: Column(
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                InkWell(
                  child: Icon(Icons.menu, color: Colors.white),
                  onTap: () {
                    setState(() {
                        // here
                    });
                  },
                ),
                Text(
                  "My Cards",
                  style: TextStyle(fontSize: 24, color: Colors.white),
                ),
                Icon(Icons.settings, color: Colors.white)
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget menu(context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Align(
        alignment: Alignment.centerLeft,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              "Dashboard ",
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
            SizedBox(
              height: 10,
            ),
            Text(
              "Messages ",
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
            SizedBox(
              height: 10,
            ),
            Text(
              "Utility Bills ",
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
            SizedBox(
              height: 10,
            ),
            Text(
              "Funds Transfer",
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
            SizedBox(
              height: 10,
            ),
            Text(
              "Branches",
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
          ],
        ),
      ),
    );
  }
}