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

时间:2018-05-28 20:03:49

标签: dart flutter flutter-dependencies

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

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(),
    );
  }

不确定我缺少什么。我的Log cat有以下

'package:flutter / src / rendering / sliver_multi_box_adaptor.dart':断言失败:第471行第12行:'child.hasSize':不是真的。

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

1 个答案:

答案 0 :(得分:0)

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

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;
  }
}