乐趣区

关于flutter:Flutter-自定义单选按钮

jiezi

原文

https://medium.com/flutterdev…

注释

理解如何创立一个自定义单选按钮在您的 Flutter 应用程序

单选按钮则称为抉择按钮，它保留布尔值。它容许客户从一组预约义的抉择中抉择一个抉择。这个组件使它不完全相同于一个复选框，咱们能够抉择一个以上的代替和未抉择的状态从新建设。咱们能够组织至多两个单选按钮的汇合，并在屏幕上显示为带有红色区域的圆形孔用于未抉择或圆点用于抉择。

咱们同样能够给每个相干的单选按钮一个标签，描述单选按钮地址的决定。一个单选按钮能够抉择通过点击鼠标在圆形孔或利用控制台备用形式。

在这个博客，咱们将摸索自定义 Flutter 单选按钮。咱们将看到如何实现一个自定义单选按钮演示程序，以及如何在您的颤振应用程序创立。

简介

Flutter 容许咱们利用 Radio 小部件制作单选按钮。用这个小部件制作的单选按钮由一个空白的内部圆和一个强外部圆组成，最初一个按钮显示在抉择状态。时不时地，你可能须要制作一个 radio gathering，其代替计划利用自定义设计，而不是传统的 radio gathering。本文举例说明了如何应用定制 catches 进行 radio gathering。

Demo Module :

演示模块:

这个演示视频显示了如何创立一个自定义单选按钮在 Flutter。它显示了如何自定义单选按钮将工作在您的 Flutter 应用程序。它展现了当用户点击按钮时，单选组将如何应用自定义按钮。动画的。它会显示在你的设施上。

如何实现 dart 文件中的代码:

你须要别离在你的代码中实现它:

在 lib 文件夹中创立一个名为 radio_opton.dart 的新 dart 文件。

因为单选按钮蕴含一个标签，所以咱们不能应用单选按钮。综上所述，咱们将创立一个自定义类，它能够用于做出称为 MyRadioOption 的抉择。受 Flutter 的 Radio 小部件的激励，该类具备 value、groupValue 和 onChanged 属性。该属性的价值解决了替代品的价值，在相似群体的所有抉择中，它应该是非同寻常的。

groupValue 属性是以后选定的值。如果选项值与 groupvalue 匹配，则该选项处于选定状态。onChanged 属性存储当用户抉择一个选项时将调用的回调函数。当用户抉择一个选项时，回调函数负责更新 groupValue。此外，咱们还增加了标签和文本属性，因为咱们须要在按钮上显示标签，并在按钮的右侧显示文本。

groupValue 属性是目前抉择的值。如果抉择值与 groupvalue 匹配，则替换处于抉择状态。onChanged 属性存储回调函数，客户机抉择时将思考该函数。当客户机抉择一个代替计划时，回调函数有任务更新 groupValue。此外，咱们还增加了标签和文本属性，因为咱们须要在按钮上显示名称，并在按钮的右侧显示内容。

上面是类的属性和构造函数。咱们利用一个惯例的类 T，理由是这个值能够是任何类型。

class MyRadioOption<T> extends StatelessWidget {

  final T value;
  final T? groupValue;
  final String label;
  final String text;
  final ValueChanged<T?> onChanged;

  const MyRadioOption({
    required this.value,
    required this.groupValue,
    required this.label,
    required this.text,
    required this.onChanged,
  });

  @override
  Widget build(BuildContext context) {// TODO implement}
}

而后，咱们将制作布局。按钮是一个圆圈，外面有名字。为了制作圆形，应用一个圆形边框作为形态的图形装璜容器。名称能够应用 Text 作为容器的子部件。而后，在这一点上，咱们能够创立一个由按钮和文本小部件组成的 Row。

import 'package:flutter/material.dart';

class MyRadioOption<T> extends StatelessWidget {

  final T value;
  final T? groupValue;
  final String label;
  final String text;
  final ValueChanged<T?> onChanged;

  const MyRadioOption({
    required this.value,
    required this.groupValue,
    required this.label,
    required this.text,
    required this.onChanged,
  });

  Widget _buildLabel() {
    final bool isSelected = value == groupValue;

    return Container(
      width: 30,
      height: 30,
      decoration: ShapeDecoration(
        shape: CircleBorder(
          side: BorderSide(color: Colors.black,),
        ),
        color: isSelected ? Colors.cyan : Colors.white,
      ),
      child: Center(
        child: Text(value.toString(),
          style: TextStyle(
            color: isSelected ? Colors.white : Colors.cyan,
            fontSize: 20,
          ),
        ),
      ),
    );
  }

  Widget _buildText() {
    return Text(
      text,
      style: const TextStyle(color: Colors.black, fontSize: 24),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(margin: EdgeInsets.all(8),
      child: InkWell(onTap: () => onChanged(value),
        splashColor: Colors.cyan.withOpacity(0.5),
        child: Padding(padding: EdgeInsets.all(5),
          child: Row(
            children: [_buildLabel(),
              const SizedBox(width: 10),
              _buildText(),],
          ),
        ),
      ),
    );
  }
}

在 lib 文件夹中创立一个名为 custom_radio_demo.dart 的新 dart 文件。

上面是一个类，其中咱们应用 MyRadioOption 作为抉择的无线电组。有一个状态变量 \_ groupValue 和一个 ValueChanged 函数，这是当客户机抉择一个备选计划时要思考的回调函数。

String? _groupValue;

ValueChanged<String?> _valueChangedHandler() {return (value) => setState(() => _groupValue = value!);
}

在主体中，如何调用 MyRadioOption 的构造函数。

MyRadioOption<String>(
  value: '1',
  groupValue: _groupValue,
  onChanged: _valueChangedHandler(),
  label: '1',
  text: 'Phone Gap',
),
MyRadioOption<String>(
  value: '2',
  groupValue: _groupValue,
  onChanged: _valueChangedHandler(),
  label: '2',
  text: 'Appcelerator',
),

当咱们运行应用程序时，咱们应该取得屏幕输入，就像上面的屏幕截图一样。

Final Output 最终输入

代码 

import 'package:flutter/material.dart';
import 'package:flutter_custom_radio_button/radio_option.dart';

class CustomRadioDemo extends StatefulWidget {

  @override
  State createState() => new _CustomRadioDemoState();
}

class _CustomRadioDemoState extends State<CustomRadioDemo> {

  String? _groupValue;

  ValueChanged<String?> _valueChangedHandler() {return (value) => setState(() => _groupValue = value!);
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        title: const Text('Flutter Custom Radio Button Demo'),
        backgroundColor: Colors.cyan,
      ),
      body: Column(
        children: [
          Padding(padding: const EdgeInsets.all(10.0),
            child: Text("Best Cross-Platform Mobile App Development Tools for 2021",
              style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18),),
          ),
          SizedBox(height: 10,),
          MyRadioOption<String>(
            value: '1',
            groupValue: _groupValue,
            onChanged: _valueChangedHandler(),
            label: '1',
            text: 'Phone Gap',
          ),
          MyRadioOption<String>(
            value: '2',
            groupValue: _groupValue,
            onChanged: _valueChangedHandler(),
            label: '2',
            text: 'Appcelerator',
          ),
          MyRadioOption<String>(
            value: '3',
            groupValue: _groupValue,
            onChanged: _valueChangedHandler(),
            label: '3',
            text: 'React Native',
          ),
          MyRadioOption<String>(
            value: '4',
            groupValue: _groupValue,
            onChanged: _valueChangedHandler(),
            label: '4',
            text: 'Native Script',
          ),
          MyRadioOption<String>(
            value: '5',
            groupValue: _groupValue,
            onChanged: _valueChangedHandler(),
            label: '5',
            text: 'Flutter',
          ),
        ],
      ),
    );
  }
}

结语

在本文中，我曾经解释了自定义单选按钮的根本构造，您能够依据本人的抉择批改这段代码。这是一个小的介绍自定义单选按钮对用户交互从我这边，它的工作应用 Flutter。

我心愿这个博客将提供您尝试在您的 Flutter 我的项目的自定义单选按钮短缺的信息。咱们将向您展现介绍是什么？. 这是一个如何制作自定义单选按钮的例子。从根本上说，每一种抉择都应该具备价值和团体价值。组值应该是相似组中所有备选项中十分类似的货色。当客户抉择一个代替计划时，组值会更新，所以请尝试一下。

如果我做错了什么，请在评论中通知我，我很乐意改良。

鼓掌如果这篇文章对你有帮忙。

© 猫哥

  • https://ducafecat.tech/
  • https://github.com/ducafecat
  • 微信群 ducafecat
  • b 站 https://space.bilibili.com/40…

往期

开源

GetX Quick Start

https://github.com/ducafecat/…

新闻客户端

https://github.com/ducafecat/…

strapi 手册译文

https://getstrapi.cn

微信探讨群 ducafecat

系列汇合

译文

https://ducafecat.tech/catego…

开源我的项目

https://ducafecat.tech/catego…

Dart 编程语言根底

https://space.bilibili.com/40…

Flutter 零根底入门

https://space.bilibili.com/40…

Flutter 实战从零开始 新闻客户端

https://space.bilibili.com/40…

Flutter 组件开发

https://space.bilibili.com/40…

Flutter Bloc

https://space.bilibili.com/40…

Flutter Getx4

https://space.bilibili.com/40…

Docker Yapi

https://space.bilibili.com/40…

退出移动版