本头条核心宗旨

欢迎来到「技术刚刚好」作者，「技术刚刚好」是个人维护，每天至少更新一篇Flutter技术文章，实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。

技术刚刚好经历

近几年，移动端跨平台开发技术层出不穷，从Facebook家的ReactNative，到阿里家WEEX，前端技术在移动端跨平台开发中大展身手，技术刚刚好作为一名Android开发，经历了从Reactjs到Vuejs的不断学习。而在2018年，我们的主角变成了Flutter，这是Goolge开源的一个移动端跨平台解决方案，可以快速开发精美的移动App。希望跟大家一起学习，一起进步！

本文核心要点

本文介绍了CupertinoSwitch 组件的使用，可以显示UI，然后点击组件后会被选中，再次点击可以取消选择，效果图如下：

代码如下：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:hexcolor/hexcolor.dart';

class FavoriteScreen extends StatefulWidget {
  @override
  _FavoriteScreenState createState() => _FavoriteScreenState();
}

class _FavoriteScreenState extends State {
  Widget stringSwitch(
      String text, bool val, bool newval, Function onChangedMethod) {
    return Padding(
      padding: EdgeInsets.only(top: 22.0, left: 16.0, right: 16.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            text,
            style: TextStyle(
                fontSize: 12.0,
                fontFamily: 'Roboto',
                fontWeight: FontWeight.w600,
                color: Hexcolor('#676767')),
          ),
          Spacer(),
          CupertinoSwitch(
              trackColor: Hexcolor('#dee7f5'),
              activeColor: Hexcolor('#0565ac'),
              value: val,
              onChanged: (newval) {
                onChangedMethod(newval);
              })
        ],
      ),
    );
  }

  bool val1 = true, val2 = false, val3 = true;

  bool newval1, newval2, newval3;

  onChangedFunction1(bool newval1) {
    setState(() {
      val1 = newval1;
    });
  }

  onChangedFunction2(bool newval2) {
    setState(() {
      val2 = newval2;
    });
  }

  onChangedFunction3(bool newval3) {
    setState(() {
      val3 = newval3;
    });
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Hexcolor('#e9f1fe'),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            stringSwitch('ABC', val1, newval1, onChangedFunction1),
            stringSwitch('PQR', val2, newval2, onChangedFunction2),
            stringSwitch('XYZ', val3, newval3, onChangedFunction3),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: FavoriteScreen(),
    );
  }
}

谢谢观看技术刚刚好的文章，技术刚刚好是个人维护，每天至少更新一篇Flutter技术文章，实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。