是否可以在flutter中的函数中调用setState()

rqdpfwrv  于 2023-08-07  发布在  Flutter
关注(0)|答案(2)|浏览(203)

当我尝试在我定义的自定义函数中使用setState()时,它说“setState()未定义”,即使我导入了'flutter/material.dart'包:

import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:smooth_like_flutter/components/service_field.dart';

void showCustomDialog(
  BuildContext context,
) {
  var number = 10;

  showDialog(
      context: context,
      builder: (BuildContext context) {
        return Column(
          children: [
            Text(
              number,
              style: TextStyle(color: Colors.grey[700]),
            ),
            MyServiceField(
              hint: 'hello',
              onChange: (fieldData) {
                var fieldNum = int.parse(fieldData);
                setState(                     // The function 'setState' isn't defined.
                  number = fieldNum
                );
              },
            ),
            ],
        );
      });
}

字符串
这段代码只是给予一个大概的想法,我试图实现,如果需要的话,我可以上传整个代码
我试过进口材料dart

oyxsuwqo

oyxsuwqo1#

setState的作用是更新屏幕/小部件的UI。你可以在一个函数中使用setState,但它必须在一个有状态的类中。有状态类允许您重新构建用户界面。在您的代码中,您已经在statefulwidget类之外声明了该函数。你能做的是:

class NewScreen extends StatefulWidget {
  const NewScreen({Key? key}) : super(key: key);

  @override
  State<NewScreen> createState() => _NewScreenState();
}

class _NewScreenState extends State<NewScreen> {

void showCustomDialog(
  BuildContext context,
) {
  var number = 10;

  showDialog(
    context: context,
    builder: (BuildContext context) {
    return Column(
      children: [
        Text(
          number,
          style: TextStyle(color: Colors.grey[700]),
        ),
        MyServiceField(
          hint: 'hello',
          onChange: (fieldData) {
            var fieldNum = int.parse(fieldData);
            setState(                     // Now you can use setState as you have declared your function in a sateful widget.
              number = fieldNum
            );
          },
        ),
        ],
    );
  });
}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Setstaet in Function'),
        backgroundColor: Colors.green,
      ),
      body: Container(
          child: Center(
         child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20.0),
        child: Container(
          child: Text(
            'User Interface Changed!!',
          ),
        )),
      )),
    );
  }
}

字符串

ibrsph3r

ibrsph3r2#

当您在StatefulWidget内部而不是外部时,可以调用setState方法,除非您传递回调。此时,您可以将对话框中的小部件提取为statefulwidget:

class CustomWidget extends StatefulWidget {
  const CustomWidget({super.key});

  @override
  State<CustomWidget> createState() => _CustomWidgetState();
}

class _CustomWidgetState extends State<CustomWidget> {
  var number = 10;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Text(
            number.toString(),
            style: TextStyle(color: Colors.grey[700]),
          ),
          TextField(
            onChanged: (fieldData) {
              var fieldNum = int.parse(fieldData);
              setState(() => number = fieldNum);
            },
          ),
        ],
      ),
    );
  }
}

字符串
并在对话框中使用它,如下所示:

void showCustomDialog(BuildContext context) {
  showDialog(
      context: context,
      builder: (BuildContext context) {
        return const CustomWidget();
      });
}

相关问题