Flutter开发（二十）—— 选择按钮

最新推荐文章于 2024-03-21 17:03:42 发布
最新推荐文章于 2024-03-21 17:03:42 发布
阅读量2.8k 收藏 2
点赞数 2
分类专栏： Android应用相关 Flutter Flutter开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RedKeyer/article/details/90208482
版权

此处介绍的选择按钮：包括了CheckBox、Radio、Switch、Slider等
以下主要通过一个Demo代码，展示多种选择按钮的属性和使用效果。
main.dart

import 'package:flutter/material.dart';
import 'MaterialComponents.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.purple,
      ),
      initialRoute: '/',
      // routes:
      routes: {
        '/': (context) => MaterialComponents(),
      },
    );
  }
}

MaterialComponents.dart

import 'package:flutter/material.dart';
import 'demo/checkbox_demo.dart';
import 'demo/radioDemo.dart';
import 'demo/switchDemo.dart';
import 'demo/sliderDemo.dart';

class MaterialComponents extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MaterialComponents'),
        elevation: 0.0,
      ),
      body: ListView(
        //ListView 增加padding
        padding: EdgeInsets.all(30.0),
        children: <Widget>[
          ListItem(title: 'CheckBox', page: CheckBoxDemo()),
          ListItem(title: 'Radio', page: RadioDemo()),
          ListItem(title: 'Switch', page: SwitchDemo()),
          ListItem(title: 'Slider', page: SliderDemo()),
        ],
      ),
    );
  }
}

class ListItem extends StatelessWidget {
  final String title;
  final Widget page;
  ListItem({this.title, this.page});

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(title),
      onTap: () {
        Navigator.of(context)
            .push(MaterialPageRoute(builder: (context) => page));
      },
    );
  }
}

checkbox_demo.dart

import 'package:flutter/material.dart';

class CheckBoxDemo extends StatefulWidget {
  @override
  _CheckBoxDemoState createState() => _CheckBoxDemoState();
}

class _CheckBoxDemoState extends State<CheckBoxDemo> {
  bool _checkboxItemA = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('CheckBoxDemo'),
        elevation: 0.0,
      ),
      body: Container(
        padding: EdgeInsets.all(15.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CheckboxListTile(
              value: _checkboxItemA,
              // 点击事件 如果null 这禁止点击
              onChanged: (value) {
                setState(() {
                  _checkboxItemA = value;
                });
              },
              title: Text('CheckboxListTile标题'), //标题
              subtitle: Text('附属标题'), //副标题
              secondary: Icon(Icons.gradient), //添加条目图标
              selected: _checkboxItemA, //添加激活颜色（跟随主题颜色）
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Checkbox(
                  value: _checkboxItemA,
                  onChanged: (value) {
                    setState(() {
                      _checkboxItemA = value;
                    });
                  },
                  activeColor: Colors.black,
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

效果展示：
在这里插入图片描述
Radio 是一个复选框组件，通常用于设置的选项里。
Radio 有以下常用属性：
activeColor → Color - 激活时的颜色。
groupValue → T - 选择组的值。
onChanged → ValueChanged - 改变时触发。
value → T - 单选的值。

radioDemo.dart

import 'package:flutter/material.dart';

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

class _RadioDemoState extends State<RadioDemo> {
  int _radioGroupA = 0;

  void _handleRadioValueChanged(int value) {
    setState(() {
      _radioGroupA = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Radio'),
        elevation: 10.0,
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('_radioGroupA: $_radioGroupA'),
            SizedBox(height: 15.0,),
            RadioListTile(
              value: 0,
              groupValue: _radioGroupA,
              onChanged: _handleRadioValueChanged,
              title: Text('RadioListTile A'),
              subtitle: Text('选择框A'),
              secondary: Icon(Icons.backspace),
              //利用_radioGroupA值与当前控件value 进行bool判断
              selected: _radioGroupA == 0,  //是否跟随主题颜色
            ),
            RadioListTile(
              value: 1,
              groupValue: _radioGroupA,
              onChanged: _handleRadioValueChanged,
              title: Text('RadioListTile B'),
              subtitle: Text('选择框B'),
              secondary: Icon(Icons.backspace),
              selected: _radioGroupA == 1,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Radio(
                  value: 0,
                  groupValue: _radioGroupA,
                  onChanged: _handleRadioValueChanged,
                  activeColor: Colors.black,
                ),
                Radio(
                  value: 1,
                  groupValue: _radioGroupA,
                  onChanged: _handleRadioValueChanged,
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

效果展示：
在这里插入图片描述
Switch 是一个切换按钮组件，通常用于设置的选项里。
Switch 的原点颜色，横条颜色都可以设置，此外原点可以以图片形式显示。
Switch 有以下常用属性：
activeColor → Color - 激活时原点的颜色。
activeThumbImage → ImageProvider - 原点还支持图片，激活时的效果。
activeTrackColor → Color - 激活时横条的颜色。
inactiveThumbColor → Color - 非激活时原点的颜色。
inactiveThumbImage → ImageProvider - 非激活原点的图片效果。
inactiveTrackColor → Color - 非激活时横条的颜色。
onChanged → ValueChanged - 改变时触发。

value → bool - 切换按钮的值。

switchDemo.dart

import 'package:flutter/material.dart';

class SwitchDemo extends StatefulWidget {
  @override
  _SwitchDemoState createState() => _SwitchDemoState();
}

class _SwitchDemoState extends State<SwitchDemo> {
  bool _SwitchItemA = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SwitchDemo'),
        elevation: 0.0,
      ),
      body: Container(
        padding: EdgeInsets.all(15.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SwitchListTile(
              value: _SwitchItemA,
              onChanged: (value) {
                setState(() {
                  _SwitchItemA = value;
                });
              },
              title: Text('SwitchListTile 是否显示密码'),
              subtitle: Text(_SwitchItemA ? '显示密码' : '隐藏密码'),
              secondary:
                  Icon(_SwitchItemA ? Icons.visibility : Icons.visibility_off),
              selected: _SwitchItemA,
              inactiveThumbImage: NetworkImage('https://dwz.cn/VIAONrkU'), //未激活
              activeThumbImage: NetworkImage('https://dwz.cn/I1HjjJMP'), //激活
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  _SwitchItemA ? '男生' : '女生',
                  style: TextStyle(fontSize: 35.0),
                ),
                Switch(
                  inactiveThumbImage:
                      NetworkImage('https://dwz.cn/VIAONrkU'), //未激活
                  activeThumbImage:
                      NetworkImage('https://dwz.cn/I1HjjJMP'), //激活
                  value: _SwitchItemA,
                  onChanged: (value) {
                    setState(() {
                      _SwitchItemA = value;
                    });
                  },
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

给Switch 圆形按钮设置图像

   inactiveThumbImage: NetworkImage('https://dwz.cn/VIAONrkU'), //未激活 图片
   activeThumbImage: NetworkImage('https://dwz.cn/I1HjjJMP'), //激活  图片

效果展示：

在这里插入图片描述

sliderDemo.dart

import 'package:flutter/material.dart';

class SliderDemo extends StatefulWidget {
  @override
  _SliderDemoState createState() => _SliderDemoState();
}

class _SliderDemoState extends State<SliderDemo> {
  double _sliderItemA = 5;//初始值
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SliderDemo'),
        elevation: 0.0,
      ),
      body: Container(
        padding: EdgeInsets.all(15.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Slider(
                  value: _sliderItemA,//当前值
                  //改变时当前值的变化
                  onChanged: (value){
                    setState(() {
                      _sliderItemA = value;
                    });
                  },
                  activeColor: Theme.of(context).accentColor,//滑道颜色 划过的颜色
                  inactiveColor: Theme.of(context).accentColor.withOpacity(0.3),//滑道颜色 未划过的颜色
                  min: 0.0,//最小值
                  max: 10.0,//最大值
                  divisions: 10,//将滑道分割成 10份
                  label: '当前进度${_sliderItemA.toInt()}',//水滴图像显示内容
                )
              ],
            ),
            SizedBox(height: 15.0,),
            Text('SliderValue: $_sliderItemA')//显示当前SliderValue值
          ],
        ),
      ),
    );
  }
}

效果展示：
在这里插入图片描述

RedKeyer
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter开发实战：如何优雅地使用下拉菜单
奇妙的Bug之旅
05-30 147
在Flutter中，下拉菜单（DropdownMenu）是一种常见的用户界面元素，它允许用户从预定义的列表中选择一个选项。本文将详细介绍如何在Flutter应用中实现下拉菜单，并提供完整的代码示例。在这个示例中，我们创建了一个简单的应用，其中包含一个下拉菜单。用户可以从三个预定义的选项中选择一个，并且选择的结果会被打印到控制台。，你可以手动打开或关闭下拉菜单，或者在用户选择一个选项后执行其他操作。接下来，创建一个下拉菜单。是一个回调函数，当用户选择一个选项时会被调用。在你的Flutter代码文件中，导入。
《Flutter 控件大全》第九十七：ToggleButtons
老孟Flutter
04-04 1844
如果你对Flutter还有疑问或者技术方面的疑惑，欢迎加入Flutter交流群（微信：laomengit）。 同时也欢迎关注我的Flutter公众号【老孟程序员】，公众号首发Flutter的相关内容。 Flutter地址：http://laomengit.com 里面包含160多个组件的详细用法。 ToggleButtons组件将多个组件组合在一起，并让用户从中选择，ToggleButto...
Flutter Radio 单选按钮
10-21
Flutter Radio 单选按钮
Flutter组件—SelectTag选择组件
最新发布
前端菜鸟
03-21 391
flutter中使用dart语言编写的SelectTag组件。
Flutter选择相册图片和拍照示例
03-08
Flutter选择图片和拍照示例，详情请看博客：https://yuzhiqiang.blog.csdn.net/article/details/88345232
Flutter Animation动画开发之——repeat循环播放
01-20
在Flutter开发中，动画是构建用户界面的重要组成部分，它能够为应用增添动态效果，提高用户体验。本篇文章将深入探讨如何使用`AnimationController`实现动画的循环播放。 在Flutter中，`AnimationController`是控制...
利用Flutter开发TodoList指南
08-10
Flutter是由Google推出的开源UI工具包，它允许开发者用一种语言——Dart，构建原生的iOS和Android应用。作为JavaScript的补充，Flutter提供了一种高效、高性能的跨平台开发方式。 ### Flutter简介 Flutter基于Dart...
UnicornDialer带有快速拨号的Flutter浮动动作按钮
08-10
【标签】"JavaScript开发-Flutter开发" 暗示了该资源可能涉及到两种技术。虽然标题主要提及Flutter，但JavaScript可能被用作辅助技术，例如在构建Web版本的Flutter应用时，或者用于与服务器端API交互。Flutter是...
FLutter实战练手商城项目
08-10
路由和导航也是Flutter开发的重要部分。在商城项目中，我们会有商品详情页、购物车页面、订单页面等多个视图间的跳转。通过Navigator，我们可以定义路由表，实现页面间的平滑过渡。 此外，对于网络请求和API接口的...
一个Flutter的音乐播放器组件即SpotifyAppleMusic等
08-10
在本文中，我们将深入探讨如何使用Flutter开发一个音乐播放器组件，这个组件的灵感来源于流行的音乐服务应用，如Spotify和Apple Music。Flutter是Google推出的一款用于构建高性能、跨平台移动应用的开源UI工具包，它...
Flutter 自定义单选按钮
会煮咖啡的猫咪
08-24 646
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pMekK9tV-1629764513963)(https://ducafecat.tech/2021/08/24/translation/exploring-custom-radio-button-in-flutter/2021-08-24-07-49-36.png)] 原文 https://medium.com/flutterdevs/exploring-custom-radio-button-in-flutter-4a93
flutter实现简单的选择器
weixin_44911775的博客
04-19 1931
参考 import 'package:flutter/material.dart'; class TextFormFieldPage extends StatefulWidget { @override _TextFormFieldPageState createState() => _TextFormFieldPageState(); } class _TextFormFieldPageState extends State<TextFormFieldPage> { fi
Flutter基础组件：按钮组件、单选组件、复选组件、滑块组件
weixin_41897680的博客
10-11 1899
Flutter基础组件：按钮组件、单选组件、复选组件、滑块组件
flutter来实现一个点击切换当前选中项的效果
浩星
04-01 2956
前言： flutter来实现一个一个点击切换当前选中项的效果，这种效果如果用vue/jquery/js来做的话，通过改变他的class名，就可以了，定义一个class的样式，当前选中的有这个class名效果，但是其他的没有，但是在flutter中确实需要变一变思维了。 实现效果： flutter实现步骤： 首先在方法的最外层定义一个变量，注意变量不能放在 build 里面，没有效果，为啥我知道，因为我在这里吃亏了 class _HomeworkState extends Stat...
Flutter之单选和复选框
chunchun1230的博客
01-22 5080
Material widgets库中提供了Material风格的单选开关Switch和复选框Checkbox，它们都是继承自StatelessWidget，所以它们本身不会保存当前选择状态，所以一般都是在父widget中管理选中状态。当用户点击Switch或Checkbox时，它们会触发onChanged回调，我们可以在此回调中处理选中状态改变逻辑。我们看一个简单的示例：    ...
浅识Flutter 基本组件之CheckBox组件
qq_43336158的博客
07-24 1448
value bool 设置复选框是否选中，取值包括true(选中) 、 false (没选中) onChanged 设置监听复选框的值发生改变时回调 tristate bool 设置复选框是否三态，取值包括true、false和 null activeColor Color 设置复选框选中时的颜色 checkColor Color 设置复选框选中时选中图标（)的颜色 materialTapTargetSize double 设置点击目标的大小，取值默包括 padded、shrink Wrap两种...
Flutter ListView子项长按浮层菜单实现
Xsinwa的博客
12-16 1564
ListView是一个常用控件，而且大多数ListView都会进行功能扩展，如左滑出现菜单选项、左滑删除、长按出现菜单选项等，本文讲介绍如何实现长按出现菜单选项功能。废话不多说，直接上代码： @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( aut...
Flutter 完整开发实战详解(二、 快速开发实战篇)
热门推荐
恋猫de小郭的博客
08-07 1万+
作为系列文章的第二篇，继《Flutter完整开发实战详解(一、Dart语言和Flutter基础)》之后，本篇将为你着重展示：如何搭建一个通用的Flutter App 常用功能脚手架，快速开发一个完整的 Flutter 应用。 友情提示：本文所有代码均在 GSYGithubAppFlutter ，文中示例代码均可在其中找到，看完本篇相信你应该可以轻松完成如下效果。相关基础还请看篇章一。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值