选择框

跟Vue不同, 跟React类似, 单选框与复选框需要一个状态维护, 改变时使用 setState 更新状态以重新渲染UI

复选框与开关

class SwitchAndCheckBoxTestRoute extends StatefulWidget {
  
  _SwitchAndCheckBoxTestRouteState createState() => new _SwitchAndCheckBoxTestRouteState();
}
class _SwitchAndCheckBoxTestRouteState extends State<SwitchAndCheckBoxTestRoute> {
  bool _switchSelected=true; // 维护单选开关状态
  bool _checkboxSelected=true; // 维护复选框状态
  
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Switch(
          value: _switchSelected, //当前状态
          onChanged:(value){
            // 重新构建页面
            setState(() {
              _switchSelected=value;
            });
          },
        ),
        Checkbox(
          value: _checkboxSelected,
          activeColor: Colors.red, // 选中时的颜色
          onChanged: (value) {
            setState(() {
              _checkboxSelected=value;
            });
          },
        )
      ],
    );
  }
}

滑块

class HomePage extends StatefulWidget {
  
  createState() => new _HomePageState();
}
class _HomePageState extends State<HomePage> {
  double _sliderValue = 1;
  
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: new AppBar(
          title: Text('首页'),
        ),
        body: Column(
          children: [
            Slider(
              value: _sliderValue,
              max: 10,
              min: 0,
              onChanged: (value) {
                setState(() {
                  _sliderValue = value;
                });
              },
            )
          ]
        )
    );
  }
}

单选框

Radio 的话, 只有点击 Radio 本身才能改变其 value, 点击 ListTile 的 title 无效

class HomePage extends StatefulWidget {
  
  createState() => new _HomePageState();
}
enum SingingCharacter { lafayette, jefferson }
class _HomePageState extends State<HomePage> {
  SingingCharacter _character = SingingCharacter.lafayette;
  
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: new AppBar(
          title: Text('首页'),
        ),
        body: Column(
          children: [
            ListTile(
              title: const Text('Lafayette'),
              leading: Radio(
                value: SingingCharacter.lafayette,
                groupValue: _character,
                onChanged: (SingingCharacter value) {
                  setState(() { _character = value; });
                },
              ),
            ),
            ListTile(
              title: const Text('Thomas Jefferson'),
              leading: Radio(
                value: SingingCharacter.jefferson,
                groupValue: _character,
                onChanged: (SingingCharacter value) {
                  setState(() { _character = value; });
                },
              ),
            ),
          ]
        )
    );
  }
}

RadioListTile

与 Radio 不同的是, RadioListTile 独占一行, 点击时有水波效果

class HomePage extends StatefulWidget {
  
  createState() => new _HomePageState();
}
enum SingingCharacter { lafayette, jefferson }
class _HomePageState extends State<HomePage> {
  SingingCharacter _character = SingingCharacter.lafayette;
  
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: new AppBar(
          title: Text('首页'),
        ),
        body: Column(
          children: <Widget>[
            RadioListTile<SingingCharacter>(
              title: const Text('Lafayette'),
              value: SingingCharacter.lafayette,
              groupValue: _character,
              onChanged: (SingingCharacter value) { setState(() { _character = value; }); },
            ),
            RadioListTile<SingingCharacter>(
              title: const Text('Thomas Jefferson'),
              value: SingingCharacter.jefferson,
              groupValue: _character,
              onChanged: (SingingCharacter value) { setState(() { _character = value; }); },
            ),
          ],
        )
    );
  }
}

时间日期选择器

showDatePicker

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress