Question

我有一个使用dataTable小部件的功能。但是我需要使用ListView.Builder小部件而不是dataTable。如何转换此功能？一些代码：

SingleChildScrollView _dataCol() {
    return SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: SingleChildScrollView(
        child: CustomDataTable(
          columns: [
            CustomDataColumn(label: Text('')),],
          rows: List<int>.generate(max(_filterEmployees.length, 11), (i) => i)
              .map((num) {
                if (num < _filterEmployees.length) {
                  return _filterEmployees[num];
                }
                return Employee();})
              .map(
                (employee) => CustomDataRow(cells: [
                  CustomDataCell(
                    Container(
                      constraints: BoxConstraints(
                          maxWidth: MediaQuery.of(context).size.width * 0.41),
                      width: MediaQuery.of(context).size.width * 0.28 +
                          _scrollBarOffset,
                      child: Text(
                        employee.facName != null ? employee.facName : '',
                        style: TextStyle(
                          color: Color.fromARGB(255, 39, 58, 77),
                          fontWeight: FontWeight.w500,
                          fontSize: 12,
                        ),
                        overflow: TextOverflow.ellipsis,
                        maxLines: 2,
                      ),),onTap: () {
                      ...});},),]),).toList(),),),);}

我尝试执行此操作，这是我的listview.builder代码，但不起作用。我看到了RangeError：

ListView _dataCol() {
    return new ListView.builder(
        scrollDirection: Axis.vertical,
        shrinkWrap: true,
        itemCount: _filterEmployees == null ? 0 : _filterEmployees.length,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
              title: Text(
            _facNameController.text[index] != null
                ? _facNameController.text[index]
                : '',
            style: TextStyle(
              color: Color.fromARGB(255, 39, 58, 77),
              fontWeight: FontWeight.w500,
              fontSize: 12,
            ),
            overflow: TextOverflow.ellipsis,
            maxLines: 2,
          ));
        });
  }

Answer 1

范围错误，因为_facNameController.text[index]的索引不存在
您可以在下面的
复制粘贴运行完整的演示代码您可以检查index和_facNameController.length并确定返回空字符串或数据
代码段

((index + 1) > _facNameController.length) ? Text("null") : Text('${_facNameController[index]}')

完整代码

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final title = 'Long List';
    List<String> _filterEmployees = List<String>.generate(100, (i) => "Item $i");
    List<String> _facNameController = List<String>.generate(2, (i) => "Item $i");

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: ListView.builder(
          itemCount: _filterEmployees == null ? 0 : _filterEmployees.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: ((index + 1) > _facNameController.length) ? Text("null") : Text('${_facNameController[index]}'),
            );
          },
        ),
      ),
    );
  }
}

如何将数据表转换为listview.builder？

1 个答案: