【问题标题】:How to create an object from a Datarow of Datatable in Flutter如何在 Flutter 中从 Datatable 的 Datarow 创建对象
【发布时间】:2019-08-20 02:31:22
【问题描述】:

我对 Flutter 很陌生,我正在构建一个购物应用程序,该应用程序在表格中列出了订单商品。用户将填写行字段,例如价格和金额。我想知道如何从表格的每一行创建订单项目的对象。请帮我!我已经被这个问题困扰了几天了。

这里是a link 示例表

这里是每一行的代码

    rows: orderedProducts
      .map((product) => DataRow(cells: [
           DataCell(Text(product.productName)),
           DataCell(
             TextFormField(
               onSaved: (String value) {
                 takeNumber(value, product.id);
                },
             keyboardType: TextInputType.number,
              ),),
           DataCell(
             TextFormField(
                onSaved: (String value) {
                   takeNumber(value, product.id);
                },
             keyboardType: TextInputType.number,
            ),),])).toList()),

【问题讨论】:

    标签: flutter dart datatable datarow


    【解决方案1】:

    以下示例是带有 TextField 的 Datatable
    在下面的示例中,数据来自 List 并且 First name 是可编辑的

    带有编辑和添加/打印所有按钮的完整演示代码

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyMaterialApp());
    
    class MyMaterialApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'flutter_typeahead demo',
          home: DataTableDemo(),
        );
      }
    }
    
    class User {
      String firstName;
      String lastName;
    
      User({this.firstName, this.lastName});
    
      static List<User> getUsers() {
        return users;
        /*return <User>[
          User(firstName: "Aaryan", lastName: "Shah"),
          User(firstName: "Ben", lastName: "John"),
          User(firstName: "Carrie", lastName: "Brown"),
          User(firstName: "Deep", lastName: "Sen"),
          User(firstName: "Emily", lastName: "Jane"),
        ];*/
      }
    
      static addUsers(firstName, lastName) {
        var user = new User();
        user.firstName = firstName;
        user.lastName = lastName;
        users.add(user);
      }
    }
    
    List<User> users = [];
    
    class DataTableDemo extends StatefulWidget {
      DataTableDemo() : super();
    
      final String title = "Data Table Flutter Demo";
    
      @override
      DataTableDemoState createState() => DataTableDemoState();
    }
    
    class DataTableDemoState extends State<DataTableDemo> {
      List<User> users;
      List<User> selectedUsers;
      bool sort;
    
      @override
      void initState() {
        sort = false;
        selectedUsers = [];
        users = User.getUsers();
        super.initState();
      }
    
      onSortColum(int columnIndex, bool ascending) {
        if (columnIndex == 0) {
          if (ascending) {
            users.sort((a, b) => a.firstName.compareTo(b.firstName));
          } else {
            users.sort((a, b) => b.firstName.compareTo(a.firstName));
          }
        }
      }
    
      onSelectedRow(bool selected, User user) async {
        setState(() {
          if (selected) {
            selectedUsers.add(user);
          } else {
            selectedUsers.remove(user);
          }
        });
      }
    
      deleteSelected() async {
        setState(() {
          if (selectedUsers.isNotEmpty) {
            List<User> temp = [];
            temp.addAll(selectedUsers);
            for (User user in temp) {
              users.remove(user);
              selectedUsers.remove(user);
            }
          }
        });
      }
    
      SingleChildScrollView dataBody() {
        return SingleChildScrollView(
          scrollDirection: Axis.vertical,
          child: Column(
            children: <Widget>[
              MaterialButton(
                child: Text('add button'),
                onPressed: () {
                  var user = new User();
                  user.firstName = "default firstName";
                  user.lastName = "default lastName";
                  users.add(user);
                  setState(() {});
                },
              ),
              MaterialButton(
                child: Text('print all button'),
                onPressed: () {
                  users.forEach((u) => print("${u.firstName} ${u.lastName}"));
                },
              ),
              DataTable(
                sortAscending: sort,
                sortColumnIndex: 0,
                columns: [
                  DataColumn(
                      label: Text("FIRST NAME"),
                      numeric: false,
                      tooltip: "This is First Name",
                      onSort: (columnIndex, ascending) {
                        setState(() {
                          sort = !sort;
                        });
                        onSortColum(columnIndex, ascending);
                      }),
                  DataColumn(
                    label: Text("LAST NAME"),
                    numeric: false,
                    tooltip: "This is Last Name",
                  ),
                ],
                rows: users
                    .map(
                      (user) => DataRow(
                              selected: selectedUsers.contains(user),
                              onSelectChanged: (b) {
                                print("Onselect");
                                onSelectedRow(b, user);
                              },
                              cells: [
                                DataCell(
                                  //Text(user.firstName),
                                  TextField(
                                    onChanged: (text) {
                                      print("First text field: $text");
                                      user.firstName = text;
                                    },
                                  ),
                                ),
                                DataCell(
                                  Text(user.lastName),
                                ),
                              ]),
                    )
                    .toList(),
              ),
            ],
          ),
        );
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Column(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.center,
            verticalDirection: VerticalDirection.down,
            children: <Widget>[
              Expanded(
                child: dataBody(),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.all(20.0),
                    child: OutlineButton(
                      child: Text('SELECTED ${selectedUsers.length}'),
                      onPressed: () {},
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.all(20.0),
                    child: OutlineButton(
                      child: Text('DELETE SELECTED'),
                      onPressed: selectedUsers.isEmpty
                          ? null
                          : () {
                              deleteSelected();
                            },
                    ),
                  ),
                ],
              ),
            ],
          ),
        );
      }
    }
    

    点击打印全部按钮时的结果

    I/flutter (13851): abc default lastName
    I/flutter (13851): def default lastName
    

    【讨论】:

    • 有没有其他方法可以在不使用添加按钮的情况下做到这一点?
    • 关键是users.add(user);和 setState(() {});你把这个逻辑放在任何你需要的地方。
    • 您的代码正在将新用户添加到用户列表中,因此您可以在我想先填写该字段时编辑该字段,然后将新用户添加到用户列表中。对不起,请最后一次给我解释一下,我真的不知道该怎么办。
    • 如果您需要在DataTable中显示您的订单项,您需要先添加列表。因为 UI 的工作只是显示列表数据,用户点击提交后总是可以删除最后一个空项。您可以使用 for 循环验证此列表。
    • 或者您可以将这些可编辑字段放在其他 UI 上,当用户单击添加按钮时。您只需添加到列表和 setState,它将显示在 DataTable 中。
    猜你喜欢
    • 1970-01-01
    • 2013-09-16
    • 2019-03-31
    • 2012-05-03
    • 1970-01-01
    • 2021-10-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多