如何创建表格颤动?

2024-04-09

我有三个列表,我必须生成表格

这些来自用户输入的列表

px =[0.1,0.2,0.3,........];
x=  [0,1,2,........];

这个第三个列表是第一个第二个列表的乘法

Mutiply=[0,0.2,0.6,......];

我想生成表格

列表的长度来自用户输入所以(我如何生成表)


简单的方法是为函数创建一个模型类,例如

class F {
  final double x;
  final double px;
  final double multiply;
  F({
    required this.x,
    required this.px,
  }) : multiply = x * px;
}

在国家层面将有一个List<F> data并且它会随着用户输入而增加。

对于DataRow的动态增加,我们可以将其映射并传递rows:

          data .map(
                    (f) => DataRow(
                      cells: [
                        DataCell(Text(f.x.toString())),
                        DataCell(Text(f.px.toString())),
                        DataCell(Text(
                          f.multiply.toStringAsFixed(3),
                        )),
                      ],
                    ),
                  )
                  .toList()

完整的小部件


class UserManager extends StatefulWidget {
  const UserManager({Key? key}) : super(key: key);

  @override
  _UserManagerState createState() => _UserManagerState();
}

class _UserManagerState extends State<UserManager> {
  List<F> data = [];

  final xController = TextEditingController();
  final pxController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          TextField(
            controller: xController,
            decoration: const InputDecoration(hintText: "x"),
          ),
          TextField(
            controller: pxController,
            decoration: const InputDecoration(hintText: "px"),
          ),
          ElevatedButton(
              onPressed: () {
                // get Text and parse to double
                final xVal = xController.text.toString();
                final pxVal = pxController.text.toString();

                double? x = double.tryParse(xVal);
                double? px = double.tryParse(pxVal);

                if (x == null || px == null) {
                  /// allow only number
                  return;
                }
                // else add to data list
                setState(() {
                  data.add(F(x: x, px: px));
                });

                /// clear
                xController.clear();
                pxController.clear();
              },
              child: Text("ADD")),
          DataTable(
              headingRowColor:
                  MaterialStateProperty.all(Colors.blueGrey.withOpacity(.5)),
              showBottomBorder: true,
              columns: const [
                DataColumn(
                  label: Text("x"),
                ),
                DataColumn(
                  label: Text("p(x)"),
                ),
                DataColumn(
                  label: Text("x*p(x)"),
                ),
              ],
              rows: data
                  .map(
                    (f) => DataRow(
                      cells: [
                        DataCell(Text(f.x.toString())),
                        DataCell(Text(f.px.toString())),
                        DataCell(Text(
                          f.multiply.toStringAsFixed(3),
                        )),
                      ],
                    ),
                  )
                  .toList()),
        ],
      ),
    );
  }
}

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何创建表格颤动? 的相关文章

随机推荐