颤振,刷新按钮按下小部件

Question

我有一个应用程序，从api中提取引号并显示它。

我正在努力让我的刷新按钮工作。当刷新按钮被按下时，一个新的报价应该被加载。

当前的代码是:

import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:share_plus/share_plus.dart';
import './Quote.dart';
class QuoteData extends StatefulWidget {
const QuoteData({Key? key}) : super(key: key);
@override
_QuoteDataState createState() => _QuoteDataState();
}
// call the API and fetch the response
Future<Quote> fetchQuote() async {
final response = await http.get(Uri.parse('https://favqs.com/api/qotd'));
if (response.statusCode == 200) {
return Quote.fromJson(json.decode(response.body));
} else {
throw Exception('Failed to load Quote');
}
}
class _QuoteDataState extends State<QuoteData>
with AutomaticKeepAliveClientMixin {
@override
bool get wantKeepAlive => true;
late Future<Quote> quote;
late Future<List<Quote>> wholeQuotes;
@override
void initState() {
super.initState();
quote = fetchQuote();
}
@override
Widget build(BuildContext context) {
super.build(context);
return FutureBuilder<Quote>(
future: quote,
builder: (context, snapshot) {
if (snapshot.hasData) {
return SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
margin: const EdgeInsets.only(left: 50.0),
child: Text(
snapshot.data!.quoteText,
style: const TextStyle(
fontSize: 30.0,
color: Colors.white,
fontFamily: 'quoteScript'),
),
),
const SizedBox(
height: 20.0,
),
Text(
'-${snapshot.data!.quoteAuthor}-',
style: const TextStyle(
fontSize: 23.0,
color: Colors.white,
fontFamily: 'quoteScript'),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
//share button
IconButton(
icon: const Icon(
Icons.share,
color: Colors.white,
),
onPressed: () {
Share.share(
'${snapshot.data!.quoteText}--${snapshot.data!.quoteAuthor}');
},
),
//refresh button
IconButton(
icon: const Icon(
Icons.share,
color: Colors.white,
),
onPressed: () {
fetchQuote();
},
),
],
),
],
),
);
} else if (snapshot.hasError) {
return Text("${snapshot.error}");
}
// By default, show a loading spinner.
return const Center(child: CircularProgressIndicator());
},
);
}
}

如何让刷新按钮刷新页面并从api加载新报价并显示它?

如有任何帮助，不胜感激。

Answer 1

用setState复位future

Future<Quote> quote;
...
IconButton(
...
onPressed: () {
setState(() {
quote = fetchQuote();
});                        
},
)

Answer 2

是否尝试在onPressed()下使用setState ?你可以这样做:

onPressed: () {
setState(()
Share.share(
'${snapshot.data!.quoteText}--${snapshot.data!.quoteAuthor}');
)},