按下按鈕禁用按鈕但不重建整個屏幕

Question

我有一個測驗屏幕，我在其中使用API和FutureBuilder 。 每次刷新build方法時，都會獲取新問題。 底部有一個提交按鈕，用於保存響應並重置屏幕。 我想要做的是disable提交按鈕，直到在按下提交按鈕后獲取新問題，並在重建新問題時啟用。 我無法使用 bool 變量調用 setstate 使其成為 null，因為因此加載了新問題。 這是我重現問題的代碼：

import 'package:flutter/material.dart';

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

  @override
  State<QuizForm> createState() => _QuizFormState();
}

class _QuizFormState extends State<QuizForm> {

  int buildCount = 0 ;

  getQuestion () {}

  @override
  Widget build(BuildContext context) {
    print(buildCount);
    print('Question Fetched and UI is building');
    return SafeArea(child: Scaffold(
      body: FutureBuilder(
        future: getQuestion(),
        builder: (context, snapshot){
          return ListView(
            children: [
              ListTile(title: Text('Quiz Title'),),
              ListTile(title: Text('1'),),
              ListTile(title: Text('2'),),
              ListTile(title: Text('3'),),
              ListTile(title: Text('4'),),
              SizedBox(height: 20,),

              ElevatedButton(
                  onPressed: () async {
                    print('Please Wait, Answer is getting Saved');
                    // Button Should be shown disabled for 3 seconds
                    await Future.delayed(const Duration(seconds: 3));
                    buildCount++;

                    setState(() {
                  // this setState rebuilds the screen and new question is loaded
                  // because of future builder
                });
              }, child: Text('Submit Quiz'))
            ],
          );
        },
      ),
    ));
  }
}

Answer 1

當您從 API 獲取數據時，檢查您的變量中是否有數據，如果有數據返回數據，如果沒有則調用 API，

更新：使用 _submitEnabled 值。

這里的例子：

    import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

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

  @override
  State<QuizForm> createState() => _QuizFormState();
}

class _QuizFormState extends State<QuizForm> {
  Question _cachedQuestion;
  bool _submitEnabled = false;

  Future<Question> getQuestion() async {
    if (_cachedQuestion != null) {
      return _cachedQuestion;
    }
    final response = await http.get('https://your-api-endpoint.com/question');
    if (response.statusCode == 200) {
      final question = Question.fromJson(json.decode(response.body));
      _cachedQuestion = question;
      _submitEnabled = true;
      return question;
    } else {
      throw Exception('Failed to fetch question');
    }
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: FutureBuilder(
          future: getQuestion(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              final question = snapshot.data;
              return ListView(
                children: [
                  ListTile(title: Text(question.title)),
                  ListTile(title: Text(

Answer 2

我設法通過ValueListenableBuilder獲得它。 這是我按預期工作的代碼：

import 'package:flutter/material.dart';

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

  @override
  State<QuizForm> createState() => _QuizFormState();
}

class _QuizFormState extends State<QuizForm> {
  final _buttonEnabled = ValueNotifier(true);

  int buildCount = 0;

  getQuestion () {}

  @override
  Widget build(BuildContext context) {
    print(buildCount);
    return SafeArea(
      child: Scaffold(
        body: FutureBuilder(
          future: getQuestion(),
          builder: (context, snapshot) {
            return ListView(
              children: [
                ListTile(title: Text('Quiz Title')),
                ListTile(title: Text('1')),
                ListTile(title: Text('2')),
                ListTile(title: Text('3')),
                ListTile(title: Text('4')),
                SizedBox(height: 20),

                ValueListenableBuilder(
                  valueListenable: _buttonEnabled,
                  builder: (context, value, child) {
                    return ElevatedButton(
                      onPressed: _buttonEnabled.value
                          ? () async {
                        _buttonEnabled.value = false;
                        print('Please Wait, Answer is getting Saved');
                        await Future.delayed(const Duration(seconds: 3));
                        _buttonEnabled.value = true;
                        buildCount++;
                        setState(() {

                        });
                      }
                          : null,
                      child: child,
                    );
                  },
                  child: Text('Submit Quiz'),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}