Flutter：带标题的ListView

Question

创建自定义标题

  Widget _listHeader({bool hideSelect = true}) {
    return Container(
      color: headerColor,
      padding: const EdgeInsets.only(top: 8, bottom: 8),
      child: Row(
        children: [
          Visibility(
            visible: hideSelect,
            child: Padding(
              padding: const EdgeInsets.only(left: 5.0),
              child: Text(
                context.tr(
                    TcConstants.moduleId, TcTrKeys.kSelect, TcTrValues.kSelect),
              ),
            ),
          ),
          Expanded(
            flex: 3,
            child: Padding(
              padding: const EdgeInsets.only(left: 5.0),
              child: Text(
                context.tr(TcConstants.moduleId, TcTrKeys.kDocumentType,
                    TcTrValues.kDocumentType),
              ),
            ),
          ),
          Expanded(
            flex: 2,
            child: Padding(
              padding: const EdgeInsets.only(left: 5.0),
              child: Text(
                context.tr(TcConstants.moduleId, TcTrKeys.kSurveyNo,
                    TcTrValues.kSurveyNo),
              ),
            ),
          ),
          Expanded(
            flex: 2,
            child: Padding(
              padding: const EdgeInsets.only(left: 5.0),
              child: Text(
                context.tr(
                    TcConstants.moduleId, TcTrKeys.kPageNo, TcTrValues.kPageNo),
              ),
            ),
          ),
        ],
      ),
    );
  }

ListView

项目生成器小部件

 Widget newItems(SelectedSurveyModel item, bool showCheckBox, int index,
      {bool showDelete = false}) {
    return Column(children: <Widget>[
      VP(size: Dimens.d10.responsive()),
      Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Visibility(
            visible: showCheckBox,
            child: QCheckBox(
              value: item.isSelected,
              onChanged: (value) {
                setState(
                  () {
                    if (widget.feeList == null) {
                      item.isSelected = value;
                    }
                  },
                );
              },
            ),
          ),
          Expanded(
            flex: 3,
            child: Padding(
                padding: showCheckBox
                    ? EdgeInsets.all(0)
                    : EdgeInsets.only(left: 10),
                child: Text(
                  '${item.documentName}',
                )),
          ),
          Expanded(
            flex: 2,
            child: Text(
              '${item.khasraNo}',
            ),
          ),
          Expanded(
            flex: 2,
            child: Text(
              ' ${item.pageNo}',
              textAlign: TextAlign.center,
            ),
          ),
          Visibility(
            visible: showDelete,
            child: IconButton(
              icon: const Icon(Icons.delete_outline_rounded),
              onPressed: () {
                if (widget.feeList == null) {
                  _onDeleteItem(index);
                }
              },
            ),
          ),
        ],
      ),
    ]);
  }

在

_header()

上方调用

ListView.Builder

小部件，但存在对齐问题

我也尝试过

DataTable

。

使用

DataTable

。

  List<DataColumn> _createColumns() {
    return [
      DataColumn(
          label: Text(context.tr(
              TcConstants.moduleId, TcTrKeys.kSelect, TcTrValues.kSelect))),
      DataColumn(
          label: Text(context.tr(TcConstants.moduleId, TcTrKeys.kDocumentType,
              TcTrValues.kDocumentType))),
      DataColumn(
          label: Text(context.tr(
              TcConstants.moduleId, TcTrKeys.kSurveyNo, TcTrValues.kSurveyNo))),
      DataColumn(
          label: Text(context.tr(
              TcConstants.moduleId, TcTrKeys.kPageNo, TcTrValues.kPageNo))),
    ];
  }

  List<DataRow> _createRows() {
    return tmpSelectedSurvey
        .map((item) => DataRow(cells: [
              DataCell(QCheckBox(
                value: item.isSelected,
                onChanged: (value) {
                  setState(
                    () {
                      if (widget.feeList == null) {
                        item.isSelected = value;
                      }
                    },
                  );
                },
              )),
              DataCell(Text(
                ' ${item.documentName}',
                textAlign: TextAlign.center,
              )),
              DataCell(Text(
                ' ${item.khasraNo}',
                textAlign: TextAlign.center,
              )),
              DataCell(Text(
                ' ${item.pageNo}',
                textAlign: TextAlign.center,
              )),
            ]))
        .toList();
  }

得到这个..

想用ListView.Builder来实现这个

Answer 1

尝试下面的代码希望对您有帮助。

使用ListView.builder()：

Center(
      child: Column(
        children: [
          Container(
            color: Colors.green.shade300,
            child: Row(
              children: [
                SizedBox(
                  width: 30,
                ),
                Expanded(
                  flex: 3,
                  child: Text('Select document type'),
                ),
                Expanded(
                  child: Text('Survey Number'),
                ),
                Expanded(
                  child: Text('Page Number'),
                ),
              ],
            ),
          ),
          Expanded(
            child: ListView.builder(
              shrinkWrap: true,
              itemCount: 100,
              itemBuilder: (child, index) {
                return Row(
                  children: [
                    Expanded(
                      flex: 4,
                      child: CheckboxListTile(
                        controlAffinity: ListTileControlAffinity.leading,
                        title: const Text('Select member name'),
                        value: false,
                        onChanged: (bool? value) {},
                      ),
                    ),
                    Expanded(
                      child: Text('2'),
                    ),
                    Expanded(
                      child: Text('8, 9, 10'),
                    ),
                  ],
                );
              },
            ),
          ),
        ],
      ),
    ),

结果：