Flutter Widget 之 SwitchListTile

请花点时间回想一下，你上次查看设置页面的情况，哇，你可能对自己说，“我希望我能快速轻松的创建一个这样的拨动开关列表”。你可以啊，使用SwitchListTile，你可以获得一个可以在任何地方点击的ListTile。将切换从关闭设置为打开

SwitchListTiles Api看起来很像同名的widget ListTile、CheckboxListTile，RadioListTile，SwitchListTile都遵循相同的模式，

ListTile(
    title: Text("ListTile"),
),
SwitchListTile(
    title: Text("SwitchListTile"),
    /* ... */
),

从title开始，它将出现在图块的中间，

你可以使用subtitle设置二级标题

然后，你可以在任一端添加图标,使用控制图块，如SwitchListTile,你可以使用secondary属性来完成此操作

ListTile(
    title: Text("ListTile"),
    subtitle: Text("Hot and cold?"),
    leading: Icon(Icons.ac_unit),
    trailing: Fire(),
),
SwitchListTile(
    title: Text("SwitchListTile"),
    subtitle: Text("Bird mode?"),
    secondary: Bird(),
    controlAffinity: ListTileControlAffinity.leading,
    /* ... */
),

你也可以使用ControlAffinity添加或反转控件在哪一侧。

SwitchListTile(
    title: Text("SwitchListTile"),
    subtitle: Text("Bird mode?"),
    secondary: Bird(),
    controlAffinity: ListTileControlAffinity.leading,
    /* ... */
),

对于ListTile 你可以只交换开头和结尾

SwitchTile和其他控制图块，添加了整个图块可点击的特性，

但它们并不是自己进行切换的，为此，SwitchListTile需要一个值 一个onChanged回调,该值是状态的一种形式。因此你通常会在有状态的小部件中找到SwitchListTile。以便onChanged可以用setState更新它。

SwitchListTile(
    title: Text("Select all"),
    value: _toggled,
    onChanged: (bool value) {
        setState(() => toggled = value);
    },
)

SwitchListTile有一点是其他控件所没有的，那就是能够用active和inactiveThumbImage想空间添加图像

SwitchListTile(
    title: Text("Select all"),
    value: _toggled,
    onChanged: (bool value) {
        setState(() => _toggled = value);
    },
    activeThumbImage: _birdMode
       ? NetworkImage(flutter_icon_url)
       : null,
);

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

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