时间戳

首页 > 解决方案 > 如何获取动态添加到列表视图构建器中的自定义列表项的摘要

flutter - 如何获取动态添加到列表视图构建器中的自定义列表项的摘要

问题描述

我有一个包含自定义项目的 listView.builder。项目将在按下按钮时添加。自定义列表项包含：

Row -|
     |- TextField (name of the counter)
     |- Text (value of the counter)
     |- IconButton (onPress => increase the value of counter)

我想生成一个报告，该报告将包含 TextField 值（用户提交）和修改后的计数器值（用户通过 IconButton 增加）。

我想在按下 RaisedButton 时将此摘要发送到下一个屏幕。

摘要格式将是这样的。

 Modified TextField Value : Modified Text(value of the counter). (item -1)
 Modified TextField Value : Modified Text(value of the counter). (item -2)
.
.
.
Modified TextField Value : Modified Text(value of the counter). (item -n)

请在下面找到代码：

class MainWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return MainWidgetState();
  }
}

class MainWidgetState extends State<MainWidget> {
//  list of the child widget
  List<ChildWidget> listChildWidget = [];

  void addChildWidget() {
    setState(() {
      listChildWidget.add(ChildWidget());
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text('Test'),
      ),
      floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            addChildWidget();
          }),
      body: new Column(
        children: <Widget>[
          Expanded(
              child: new ListView.builder(
                  itemCount: listChildWidget.length,
                  itemBuilder: (context, index) {
                    return new ListTile(title: listChildWidget[0]);
                  })),

          // Get summary of all the list items
          RaisedButton(
              child: Text('Get Summary'),
              onPressed: (){
            // Get the list of all the textField values and their modified
            // counter values

          })
        ],
      ),
    );
  }
}

class ChildWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return ChildWidgetState();
  }
}

class ChildWidgetState extends State<ChildWidget> {
  int counterValue = 0;
  TextEditingController myTextController;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Row(
      children: <Widget>[
        // counter name
        Container(
          child: TextField(
            controller: myTextController,
            textAlign: TextAlign.center,
          ),
          width: 100.0,
        ),

        // counter text
        Text(counterValue.toString()),

        // increases the counter value
        IconButton(
            icon: Icon(Icons.add_circle),
            onPressed: () {
              setState(() => counterValue += 1);
            })
      ],
    );
  }
}

标签： flutterdart

解决方案

我不确定您所说的动态是什么意思，据我所知，没有什么可以自动为您做到这一点。但是你可以像这样实现它：

class CounterWithSummary extends StatefulWidget {
  @override
  _CounterWithSummaryState createState() => _CounterWithSummaryState();
}

class _CounterWithSummaryState extends State<CounterWithSummary> {
  List<String> summary = [];
  int counterValue = 0;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Text(counterValue.toString()),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.add_circle),
                onPressed: () {
                  setState(() => counterValue += 1);
                  addToSummary("+");
                },
              ),
              IconButton(
                icon: Icon(Icons.remove_circle),
                onPressed: () {
                  setState(() => counterValue -= 1);
                  addToSummary("-");
                },
              ),
            ],
          ),
          RaisedButton(
            child: Text('Summary'),
            onPressed: () => Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context){
                  return SummaryView(summary: summary);
                }
              )
            ),
          )
        ],
      ),
    );
  }

  void addToSummary(String operator){
    summary.add("Modified TextField Value : $counterValue. (item ${operator}1)");
  }
}

class SummaryView extends StatelessWidget {
  final List<String> summary;

  SummaryView({this.summary});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Summary')),
      body: ListView.builder(
        itemCount: summary.length,
        itemBuilder: (context, index) {
          return Text(summary[index]);
        },
      ),
    );
  }
}

推荐阅读