flutter - 我的函数执行晚于将变量分配给文本小部件

Question

我有一个购物车图标的柜台徽章。但问题是，在执行功能之前，$ count变量分配给了文本小部件，因此它返回null，但我第一次将其分配为0。切换到其他屏幕，然后切换到该屏幕后，该值出现，因为执行的功能可以在下面看到我的图标徽章代码。 countForBadge()是我的函数，count是我的变量，我不知道我的函数是将来的类型，也许这就是原因

import 'package:flutter/material.dart';
import 'package:restaurant_ui_kit/models/user.dart';
import 'package:restaurant_ui_kit/util/database_helper.dart';

class IconBadge extends StatefulWidget {

  final IconData icon;
  final double size;

  static int counteer;

  IconBadge({Key key, @required this.icon, @required this.size})
      : super(key: key);


  @override
  _IconBadgeState createState() => _IconBadgeState();
}

class _IconBadgeState extends State<IconBadge> {



//List _users;
  static int count ; 
  Future countForBadge() async{

    var db = new DatabaseHelper();

    count = await db.getCount();
    print("Count: $count");
    //print("khAN NNNN $counteer");
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    countForBadge();
  }



  @override
  Widget build(BuildContext context) {

   if (count == null){
     count = 0;
   }

   print("Count lande: $count");
    return Stack(
      children: <Widget>[
        Icon(
          widget.icon,
          size: widget.size,
        ),
        Positioned(
          right: 0.0,
          child: Container(
            padding: EdgeInsets.all(1),
            decoration: BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.circular(6),
            ),
            constraints: BoxConstraints(
              minWidth: 13,
              minHeight: 13,
            ),
            child: Padding(
              padding: EdgeInsets.only(top: 1),
              child:Text(
                "$count",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 8,
                ),
                textAlign: TextAlign.center,
              ),
            ),
          ),
        ),
      ],
    );
  }
}

Answer 1

您是对的，它不起作用的原因是因为它是 future 。我个人将使用的潜在解决方案(不确定它是否完全适合您，取决于您的应用程序)是以下修改的build方法-使用FutureBuilder检索并显示count数据:

Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Icon(
          widget.icon,
          size: widget.size,
        ),
        Positioned(
          right: 0.0,
          child: Container(
            padding: EdgeInsets.all(1),
            decoration: BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.circular(6),
            ),
            constraints: BoxConstraints(
              minWidth: 13,
              minHeight: 13,
            ),
            child: Padding(
              padding: EdgeInsets.only(top: 1),
              child: FutureBuilder(
                future: countForBadge(),
                builder: (BuildContext context, AsyncSnapshot snapshot) {
                  if(snapshot.hasData){
                    return Text(
                      snapshot.data.toString(),
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 8,
                      ),
                      textAlign: TextAlign.center,
                    );
                  }
                  return Container();
                }
              ),
            ),
          ),
        ),
      ],
    );
  }

这样，您可以删除静态 count变量，而不必在 countForBadge中进行 initState()。

可能更容易实现的 替代方法是像这样在 setState中调用 countForBadge:

Future countForBadge() async{

  var db = new DatabaseHelper();

  setState(() {
    count = await db.getCount();
  });
  print("Count: $count");
  //print("khAN NNNN $counteer");
}