Flutter Widget 之CheckboxListTile

251 阅读1分钟

每当你完成一件事,从清单中划掉它会让自己很有成就感,但永远不会只有一件事要做,而这些复选框通常是以列表的形式出现。

ezgif.com-gif-maker (1).gif

一种选择是把Checkbox小部件与其他小部件一起组成列表,突然间,开始感觉很熟悉,几乎就像列表中的一块磁贴,这是CheckboxListTile小部件的最佳位置

image.png

CheckboxListTile(
    
)

CheckboxListTile结合了两个小部件,Checkbox和ListTile。但他不是简单地将leading或者trailing小部件变成Checkbox,而是让它在ListTile中的任意位置轻按即可切换Checkbox

ezgif.com-gif-maker (1).gif

CheckboxListTile的构造函数看起来很像Checkbox和ListTile的组合

  • 你为text提供一个标题,
  • 并用secondary来设置另一侧的小部件,在ListTile中,这可能是leading或trailing参数
  • 但在CheckboxListTile中其中的一个将永远是Checkbox
  • 你可以通过使用controlAffinity属性来控制这些内容出现在哪一侧,传入ListTileControlAffinity.leading、trailing或platform,就会把Checkbox放在前面,最后面或者是平台上的任何一个位置。
  • CheckboxListTile本身并不维护任何状态,所以你会经常在另一个有状态的小部件中找到它,这样一来,不论狗选矿是否被选中都可以用value属性来维护位状态
  • 并通过CheckboxListTiles onChanged回调来修改
  • 最后,如果你不喜欢应用程序提供的默认颜色,你可以用activeColor和checkColor覆盖它们
CheckboxListTile(
    title: Text("Check! Mate?"),
    secondary: Icon(Icons.beach_access),
    controlAffinity: ListTileControlAffinity.leading,
    value: _checked,
    onChanged: (bool value) {
        setState(() {
            _checked = value;
        });
    },
    activeColor: Colors.green,
    checkColor: Colors.black,
)

这就是你所拥有的你自己的带CheckBox的ListTile!

ezgif.com-gif-maker.gif

如果想了解有关CheckboxListTile的内容,或者关于Flutter的其他功能,请访问flutter.dev

原文翻译自视频:视频地址