时间戳

首页 > 解决方案 > Flutter 小部件未在热重载中显示其显示

flutter - Flutter 小部件未在热重载中显示其显示

问题描述

我按循环显示小部件问题是当我使用 HotReload 时它不显示小部件然后它显示列表小部件

class _CartPageState extends State<CartPage> {
  void navigateToAddressPage() {
    Get.to(AddressPage());
  }

  @override
  void initState() {
    this._query();
  }

  List<Widget> textWidgetList = List<Widget>();

  void _query() async {
    print('cart');
    final dbHelper = DatabaseHelper.instance;

    final allRows = await dbHelper.queryAllRows();
    print(allRows);
    print('query all rows:');
    allRows.forEach((row) => print(row));

    for (int i = 0; i < allRows.length; i++) {
      textWidgetList.add(Card(
        elevation: 5.0,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(12.0),
        ),
        margin: EdgeInsets.symmetric(vertical: 8.0),
        child: Container(
          width: double.infinity,
          height: 120.0,
          padding: EdgeInsets.all(12.0),
          child: Row(
            children: [
              ClipRRect(
                  borderRadius: BorderRadius.circular(12.0),
                  // child: CachedNetworkImage(
                  //   imageUrl:
                  //   'https://i.pinimg.com/564x/7f/0f/dc/7f0fdc10a9cb26e78d8e6257e1b06fb6.jpg',
                  //   height: 100.0,
                  //   width: 100.0,
                  // ),
                  child: Image.asset(
                    allRows[i]['image'],
                    height: 100,
                    width: 100,
                  )),
              SizedBox(width: 12.0),
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.symmetric(vertical: 10.0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Expanded(
                            child: Text(
                              allRows[i]['title'],
                              textAlign: TextAlign.start,
                              maxLines: 3,
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                          SizedBox(width: 5.0),
                          Row(
                            children: [
                              GestureDetector(
                                onTap: () {},
                                child: Icon(
                                  FlutterIcons.delete_outline_mco,
                                ),
                              )
                            ],
                          )
                        ],
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Expanded(
                            child: Text(
                              allRows[i]['price'],
                            ),
                          ),
                          // Counter(),
                        ],
                      ),
                    ],
                  ),
                ),
              )
            ],
          ),
        ),
      ));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: buildAppBar(context),
      body: Container(
        child: SingleChildScrollView(
          padding: EdgeInsets.symmetric(horizontal: 18.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              SizedBox(height: 12.0),
              Column(children: textWidgetList),

            ],
          ),
        ),
      ),
    );
  }
}

您可以在代码中看到我在 for 循环中显示数据，然后显示小部件，但不知道为什么当我使用热重载时它不显示小部件。我正在从 sqllite 获取数据，所以我认为这不是问题屏幕首先加载然后数据加载

标签： flutter

解决方案

那是因为您setState((){});在方法的末尾错过了 a _query()。发生的情况是，它_query()会在创建小部件后立即调用，然后填充textWidgetList，但您实际上从未告诉 Flutter 它需要刷新 UI。

当您按下热重载时，它实际上会这样做，重建所有小部件（或其状态），以便您可以实际看到textWidgetList更改。

例如，要解决您的问题，请不要忘记setState((){})在方法结束时调用_query()。

推荐阅读