一个测试:我正在构建一个应用程序,其中有一个可滚动Table

【问题描述】:

我正在构建一个包含 TexField 列的可滚动表格的应用程序。

当我尝试编辑字段或滚动表时,我注意到性能受到了巨大影响。我该如何解决这个问题?

这是一个测试我的问题的示例应用

void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: App(),
      ),
    );
  }
}
class App extends StatelessWidget {
  List items = List.generate(3 * 48, (index) => Item(index));
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Table(
        border: TableBorder.all(),
        defaultColumnWidth: FixedColumnWidth(100),
        children: [
          TableRow(
              children: items
                  .map((item) =>
                      SizedBox(height: 48, child: Text(item.value.toString())))
                  .toList()),
          ...List.generate(
              6,
              (index) => TableRow(
                  children: items
                      .map((item) => SizedBox(
                          height: 48,
                          child: CellTextField(item: item, onChange: (_) {})))
                      .toList()))
        ],
      ),
    );
  }
}
class Item {
  int value;
  Item(this.value);
}
class CellTextField extends StatelessWidget {
  final Item item;
  final Function(num newValue) onChange;
  CellTextField({Key? key, required this.item, required this.onChange})
      : super(key: key);
  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: TextEditingController(text: item.value.toString())
        ..selection =
            TextSelection.collapsed(offset: item.value.toString().length),
      onChanged: (newValue) {
        try {
          final _newValue = int.parse(newValue);
          if (item.value != _newValue) {
            onChange(_newValue);
          }
        } catch (e) {}
      },
      decoration: InputDecoration(
        suffixText: '€',
      ),
    );
  }
}

© 版权声明
THE END
喜欢就支持一下吧
点赞231赞赏 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容