欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Flutter Radio,RadioListTile以及Switch开关

程序员文章站 2022-05-30 19:36:42
...

Radio

Flutter Radio,RadioListTile以及Switch开关

import 'package:flutter/material.dart';

class RadioDemo extends StatefulWidget {
  @override
  _RadioDemoState createState() => _RadioDemoState();
}

class _RadioDemoState extends State<RadioDemo> {
  var sex=1;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Title'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('男:'),
              Radio(value: 1, groupValue: sex, onChanged: (v){
                setState(() {
                  this.sex=v;
                });
              }),
              Text('女:'),
              Radio(value: 2, groupValue: sex, onChanged: (v){
                setState(() {
                  this.sex=v;
                });
              }),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(sex==1?'男':'女')
            ],
          )
        ],
      ),
    );
  }
}

Flutter Radio,RadioListTile以及Switch开关

import 'package:flutter/material.dart';

class RadioDemo extends StatefulWidget {
  @override
  _RadioDemoState createState() => _RadioDemoState();
}

class _RadioDemoState extends State<RadioDemo> {
  var sex=1;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Title'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          RadioListTile(
            value: 1,
            onChanged: (v){
              setState(() {
                this.sex=v;
              });
            },
            title: Text('Title'),
            subtitle: Text('subtitle'),
            selected: this.sex==1,//文字也选中
            groupValue: this.sex,
          ),
          RadioListTile(
            value:2,
            onChanged: (v){
              setState(() {
                this.sex=v;
              });
            },
            title: Text('Title02'),
            subtitle: Text('subtitle02'),
            groupValue: this.sex,
            selected: this.sex==2,//文字也选中
            secondary: Image.network('http://5b0988e595225.cdn.sohucs.com/images/20171108/d29a69f9c7fc41d1aae4516df8ebfac3.jpeg',height: 60,width: 60,),
          )
        ],
      ),
    );
  }
}

Switch

Flutter Radio,RadioListTile以及Switch开关
Flutter Radio,RadioListTile以及Switch开关

import 'package:flutter/material.dart';

class RadioDemo extends StatefulWidget {
  @override
  _RadioDemoState createState() => _RadioDemoState();
}

class _RadioDemoState extends State<RadioDemo> {
  var flag=true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Title'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Switch(
                value: this.flag,
                onChanged: (v){
                  setState(() {
                    this.flag=v;
                  });
                },
              )
            ],
          )
        ],
      ),
    );
  }
}