Flutter - 如何实现带有粘性标题的复选框？

Question

我正在尝试使用以下库实现粘性标头

sticky_header_list 1.0.2

https://pub.dartlang.org/packages/sticky_header_list#-readme-tab-

和一个列表视图复选框的地图对象

  Map<String, bool> valuesCarsHdr = {
    'Cars': false,
  };
  Map<String, bool> valuesCars = {
    'Car11': false,
    'Car12': false,
    'Car13': false,
    'Car14': false,
    'Car15': false,
    'Car16': false,
    'Car17': false,
    'Car18': false,
    'Car19': false,
    'Car20': false,
    'Car21': false,
  };

  Map<String, bool> valuesHdrHeadlights = {
    'Headlights': false,
  };
  Map<String, bool> valuesHeadlights = {
    'Headlights1': false,
    'Headlights2': false,
    'Headlights3': false,
    'Headlights4': false,
    'Headlights5': false,
    'Headlights6': false,
    'Headlights7': false,
    'Headlights8': false,
    'Headlights9': false,
    /...

  };

按照我尝试过的说明

  @override
  Widget build(BuildContext context) {
    this.widget.context = context;
    final Size screenSize = MediaQuery.of(context).size;

    return new Scaffold(
        appBar: new AppBar(
          title: new Text('Select Items'),
        ),
        body: new Container(
            height: screenSize.height,
            child: new StickyList(
              children: <StickyListRow>[
                new HeaderRow(child: _myHeaderCarsRow()),
                new RegularRow(child: _myRegularCarsRow()),
                new HeaderRow(child: _myHeaderCarsRow()),
                new RegularRow(child: _myRegularCarsRow())
              ],
            )));
  }

  Widget _myHeaderCarsRow()
  {
    return  new ListView(
      children: valuesCarsHdr.keys.map((String key) {
        return new CheckboxListTile(
          title: new Text(key),
          value: valuesCarsHdr[key],
          onChanged: (bool value) {
            setState(() {
              valuesCarsHdr[key] = value;
            });
          },
        );
      }).toList(),
    );
  }
  Widget _myRegularCarsRow()
  {
    return  new ListView(
      children: valuesCars.keys.map((String key) {
        return new CheckboxListTile(
          title: new Text(key),
          value: valuesCars[key],
          onChanged: (bool value) {
            setState(() {
              valuesCars[key] = value;
            });
          },
        );
      }).toList(),
    );
  }

不知道我错过了什么。我的日志猫有以下

'package:flutter/src/rendering/sliver_multi_box_adaptor.dart'：断言失败：第 471 行 pos 12：'child.hasSize'：不正确。

非常感谢任何帮助。谢谢。

Answer 1

我认为您误解了如何使用该库。以下是我创建列表的方式，您可以将标题和列表视图更改为您想要的

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

void main() => runApp(new MaterialApp(
      home: new MyApp(),
    ));

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  Map<String, bool> valuesCarsHdr = {
    'Cars': false,
  };
  Map<String, bool> valuesCars = {
    'Car11': false,
    'Car12': false,
    'Car13': false,
    'Car14': false,
    'Car15': false,
    'Car16': false,
    'Car17': false,
    'Car18': false,
    'Car19': false,
    'Car20': false,
    'Car21': false,
  };

  Map<String, bool> valuesHdrHeadlights = {
    'Headlights': false,
  };
  Map<String, bool> valuesHeadlights = {
    'Headlights1': false,
    'Headlights2': false,
    'Headlights3': false,
    'Headlights4': false,
    'Headlights5': false,
    'Headlights6': false,
    'Headlights7': false,
    'Headlights8': false,
    'Headlights9': false,
  };

  @override
  Widget build(BuildContext context) {
    //this.widget.context = context;
    final Size screenSize = MediaQuery.of(context).size;

    return new Scaffold(
        appBar: new AppBar(
          title: new Text('Select Items'),
        ),
        body: new Container(
            child: new StickyList(
          children: <StickyListRow>[
            new HeaderRow(child: _myHeaderCarsRow(1)),
            new RegularRow(child: _myRegularCarsRow()),
            new HeaderRow(child: _myHeaderCarsRow(2)),
            new RegularRow(child: _myRegularCarsRow())
          ],
        )));
  }

  Widget _myHeaderCarsRow(index) {
    return new Row(
      children: <Widget>[new Text("Header $index")],
    );
  }

  Widget _myRegularCarsRow() {
    return new Column(
      children: getRegularWidgets(),
    );
  }

  List<Widget> getRegularWidgets() {
    List<Widget> widgets = valuesCars.keys.map((key) {
      return new CheckboxListTile(
          title: new Text(key),
          value: valuesCars[key],
          onChanged: (bool value) {
            setState(() {
              valuesCarsHdr[key] = value;
            });
          });
    }).toList();

    return widgets;
  }
}