颤振：从颤动的列表视图中删除带有删除图标的小部件

Question

我有一个表单构建器应用程序，我有添加到列表视图的无状态小部件，每个小部件都有一个删除图标，我想删除小部件并更新列表视图。

其中一个代码小部件代码是这样的

class HeaderTextWidget extends StatelessWidget {
  final VoidCallback onDelete;

  HeaderTextWidget({Key key, this.onDelete}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(bottom: 12.0),
      decoration: BoxDecoration(
        color: Colors.blueGrey,
        borderRadius: BorderRadius.only(
          topRight: Radius.circular(15.0),
          topLeft: Radius.circular(15.0),
        ),
      ),
      child: Column(
        children: <Widget>[
          Padding(
            padding: EdgeInsets.all(6.0),
            child: Text(
              'Header',
              style: TextStyle(
                color: Colors.white,
                fontSize: 18.0,
              ),
            ),
          ),
          Card(
            elevation: 5.0,
            color: Colors.blueGrey.shade50,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(15.0),
                topRight: Radius.circular(15.0),
              ),
            ),
            child: Column(
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.fromLTRB(8.0, 10.0, 8.0, 10.0),
                  child: TextField(
                    textCapitalization: TextCapitalization.words,
                    keyboardType: TextInputType.text,
                    style: TextStyle(
                      fontSize: 18.0,
                      fontWeight: FontWeight.bold,
                    ),
                    decoration: InputDecoration(
                      hintText: 'untitled header',
                      hintStyle: TextStyle(
                        color: Colors.grey,
                        fontStyle: FontStyle.italic,
                        fontSize: 14.0,
                      ),
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.fromLTRB(8.0, 4.0, 8.0, 20.0),
                  child: TextField(
                    textCapitalization: TextCapitalization.words,
                    keyboardType: TextInputType.text,
                    style: TextStyle(
                      fontSize: 14.0,
                      fontWeight: FontWeight.normal,
                    ),
                    decoration: InputDecoration(
                      hintText: 'Description (optional)',
                      hintStyle: TextStyle(
                        color: Colors.grey,
                        fontSize: 14.0,
                      ),
                    ),
                  ),
                ),
                Divider(
                  indent: 4.0,
                  endIndent: 4.0,
                  thickness: 2.0,
                ),
                IntrinsicHeight(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      IconButton(
                        icon: Icon(Icons.content_copy),
                        iconSize: 24.0,
                        color: Colors.blue,
                        onPressed: () {
                          Scaffold.of(context).showSnackBar(
                            SnackBar(
                              content: Text('COpy'),
                            ),
                          );
                        },
                      ),
                      IconButton(
                        icon: Icon(Icons.delete),
                        iconSize: 24.0,
                        color: Colors.red,
                        onPressed: this.onDelete,
                      ),
                      VerticalDivider(
                        thickness: 2.0,
                        endIndent: 6.0,
                        indent: 4.0,
                      ),
                      Padding(
                        padding: const EdgeInsets.only(right: 12.0),
                        child: SwitchWidget(),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}  

这是我的列表视图构建器

body: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                FormBuilder(
                    key: widget.fbKey,
                    autovalidate: true,
                    child: Expanded(
                      child: Padding(
                        padding: const EdgeInsets.all(10.0),
                        child: ListView.builder(
                          itemCount: widget.data.widgets.length,
                          controller: _scrollController,
                          itemBuilder: (context, index) {
                            return widget.data.widgets[index];
                          },
                        ),
                      ),
                    )),
              ],
            ),
          );  

这是添加小部件的方式，当单击该特定图标时，视图将从选定的小部件更改为列表视图构建器页面。应该在哪里添加删除功能，在列表视图中还是在小部件本身中？

Scaffold(
            appBar: AppBar(
              title: Text('Form Widgets'),
            ),
            body: LayoutBuilder(
              builder:
                  (BuildContext context, BoxConstraints viewPointConstrainsts) {
                return SingleChildScrollView(
                  padding: EdgeInsets.all(12.0),
                  child: ConstrainedBox(
                    constraints: BoxConstraints(
                      minHeight: viewPointConstrainsts.maxHeight,
                    ),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: <Widget>[
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            FormWidget(
                              key: UniqueKey(),
                              iconData: Icons.title,
                              widgetTxT: 'Header',
                              onTap: () {
                                setState(() {
                                  widget.data.widgets.add(HeaderTextWidget());
                                  widget.pickWidgetsView = false;
                                });
                              },
                            ),

Answer 1

尝试以下方法：

1. 仅存储数据，而不是 Widget 本身在列表中

List<DataModel> data = []

1. 使用createListViewItem() 创建列表视图项，它应该返回如下小部件

ListView.builder(
  itemCount: widget.dataList.length,
  controller: _scrollController,
  itemBuilder: (context, index) {
    return createListViewItem(index);
  },
),

1. 现在在createListViewItem(index) 中，您可以按照widget.dataList[index] 创建数据并通过单击删除图标删除列表项

setState(){
   widget.dataList.deleteAt(index);
}