首页 > 解决方案 > 挂载小部件后如何显示值?

问题描述

如何显示已保存在共享首选项中的硬币?

我有readCoins方法可以获取我想要显示的内容。我可以显示currentCoin然后使用按钮更新它,但我想在将CoinBar 小部件添加到元素树时更新Coins 。

如何在挂载小部件后从 shared_preferences 中读取值。

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: CoinBar(
              awardCoin: 4,
            ),
          ),
        ),
      ),
    );
  }
}

class CoinBar extends StatefulWidget {
  final int awardCoin;
  const CoinBar({Key key, this.awardCoin}) : super(key: key);
  @override
  _CoinBarState createState() => _CoinBarState();
}

class _CoinBarState extends State<CoinBar> {

  Future<int> recordedCoin = readCoins();
  var currentCoin = 0;

  addAwardThenUpdateCurrentCoin() async {
    await addAwardToCoin(widget.awardCoin);
    final _currentCoinOnSP = await readCoins();
    setState(() {
      currentCoin = _currentCoinOnSP;
    });
  }

  @override
  build(BuildContext context) {
    return Row(
      children: [
        Text("$currentCoin Coin"),
        ElevatedButton(
          onPressed: () => addAwardThenUpdateCurrentCoin(),
          child: Text('update'),
        )
      ],
    );
  }
}

Future<int> readCoins() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  int coin = prefs.getInt('coin');
  return coin;
}

addAwardToCoin(int award) async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  int _existingCoins = await readCoins();
  await prefs.setInt('coin', ((_existingCoins ?? 0) + award));
}

我需要使用 FutureBuilder 吗?或者是否可以addAwardThenUpdateCurrentCoin在页面加载时触发方法?

可以在挂载小部件后调用


我习惯于从 vue.js 生命周期钩子中运行方法,但 Flutter 似乎使用了不同的方法。

@override
  void initState() {
    super.initState();
    // CAN NOT GET final _currentCoinOnSP = await readCoins();
    currentCoin = _currentCoinOnSP;

  }

标签: flutterdart

解决方案


推荐阅读