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(),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

这是我的Listview构建器

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

尝试以下方法：

仅存储数据，而不存储列表中的Widget本身

List<DataModel> data = []

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

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

现在在createListViewItem(index)内，您可以根据widget.dataList[index]创建数据，并在单击删除图标后删除列表项

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

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

1 个答案: