flutter - 返回类型不是小部件:SetState问题

Question

我在更新页面时遇到问题:
我想在我的页面中包含一个StatelessWidget和itemBuilder。窗口小部件将用Cards构建一个ListView。
LongPress应该删除卡并更新页面，但不会更新。这是不可能的，因为它是一个无状态的Widget。

我已经尝试过将StatlessWidget变成StatefullWidget，但是在itemBuilder中，我收到一条错误消息，指出返回类型“ProductList(..)”不是小部件。

List<String> artikelNamen = [];
List<int> barcodes = [];

class WiederaufnahmePage extends StatefulWidget {
  @override
  _WiederaufnahmePageState createState() => _WiederaufnahmePageState();
}

class ProductList extends StatelessWidget {
  final String artb;
  final int brcde;
  final int indx;

  ProductList(this.artb, this.brcde, this.indx);

  @override
  Widget build(BuildContext context) {
    return new Card(
        child: ListTile(
          title: Text(artb,
          style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20)),
          subtitle: Text(brcde.toString()),
          leading: Icon(
            Icons.fastfood,
            color: Colors.blue[500],
          ),
          trailing: Icon(Icons.keyboard_arrow_right),
          onTap: () {
            Navigator.pushNamed(context, "/BarcodePage");
          },
          onLongPress: () {
            _showSnackBar(artb);
            artikelNamen.removeAt(indx);
            barcodes.removeAt(indx);
            //setState(() {}); //This isn't working bc StatelessWidget
         },
    ));
  }
}

class _WiederaufnahmePageState extends State<WiederaufnahmePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
           child: Expanded(
              child: SizedBox(
                  height: 200.0,
                  child: new ListView.builder(
                    reverse: false,
                    itemBuilder: (_, int index) => ProductList(
                        artikelNamen[index], barcodes[index], index),
                    itemCount: artikelNamen.length,
                  )
              )),
          ))
  }   
}

我不知道如何解决这个问题。所显示的代码是实际的工作代码，我想在ListTile上的每次LongPress之后实现整个页面的更新，以便删除的Tile不再可见。

Answer 1

首先是一个好的实践，将变量代码移到StatefulWidget的状态，在这种情况下，artikelNamen和条形码不应由ProductList访问。

之后，将StatelessWidget更改为接收onLongPress的回调函数，并将其分配给卡。然后，您可以将onLongPress函数移动到StatefulWidget(调用setState)并将其作为参数传递给无状态窗口小部件。

您可以尝试如下操作:

import 'package:flutter/material.dart';

class WiederaufnahmePage extends StatefulWidget {
  @override
  _WiederaufnahmePageState createState() => _WiederaufnahmePageState();
}

class _WiederaufnahmePageState extends State<WiederaufnahmePage> {
  List<String> artikelNamen = ['item 1', 'item 2', 'item 3'];
  List<int> barcodes = [0, 1, 2];
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8.0),
      child: ListView.builder(
        reverse: false,
        itemBuilder: (BuildContext context, int index) => ProductList(
            artikelNamen[index], barcodes[index], () => onLongPress(index)),
        itemCount: artikelNamen.length,
      ),
    );
  }

  void onLongPress(int indx) {
    //_showSnackBar(artb);
    setState(() {
      artikelNamen.removeAt(indx);
      barcodes.removeAt(indx);
    });
  }
}

class ProductList extends StatelessWidget {
  final String artb;
  final int brcde;
  final onLongPress;

  ProductList(this.artb, this.brcde, this.onLongPress);

  @override
  Widget build(BuildContext context) {
    return new Card(
        child: ListTile(
      title: Text(artb,
          style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20)),
      subtitle: Text(brcde.toString()),
      leading: Icon(
        Icons.fastfood,
        color: Colors.blue[500],
      ),
      trailing: Icon(Icons.keyboard_arrow_right),
      onTap: () {
        Navigator.pushNamed(context, "/BarcodePage");
      },
      onLongPress: onLongPress,
    ));
  }
}