Flutter_34_Switch

最新推荐文章于 2024-11-02 15:36:50 发布

「已注销」

最新推荐文章于 2024-11-02 15:36:50 发布

阅读量79

点赞数

分类专栏： dart 文章标签： dart flutter

本文链接：https://blog.csdn.net/m0_49349981/article/details/119879643

版权

dart 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

本文介绍了Flutter中两种开关组件——Switch和CupertinoSwitch的使用方法，包括它们的属性如value、onChanged、activeColor等，并通过示例展示了如何创建和改变开关状态。同时，还演示了自定义颜色来改变开关的视觉效果。

摘要由CSDN通过智能技术生成

Switch
- value(开关的值，一般与状态字段绑定)
- onChanged(开关状态变更时调用)
- activeColor(开关开启时的圆圈颜色）
- activeTrackColor(开关开启时的轨道颜色)
- inactiveThumbColor(开关关闭时的圆圈颜色)
- inactiveTrackColor(开关关闭时的轨道颜色)
CupertionSweitch(IOS风格的开关)
- import ‘package:flutter/cupertino.dart’

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

void main() {
  //下一个组件
  runApp(MyApp());
}

//MaterialApp
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter",
      //下一个组件
      home: Home(),
      debugShowCheckedModeBanner: false,
    );
  }
}

//Scaffold
class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Switch"),
        leading: Icon(Icons.menu),
        actions: [Icon(Icons.settings)],
        elevation: 0.0,
        centerTitle: true,
      ),
      //下一个组件
      body: SwitchDemo(),
    );
  }
}

class SwitchDemo extends StatefulWidget {
  const SwitchDemo({Key key}) : super(key: key);

  @override
  _SwitchDemoState createState() => _SwitchDemoState();
}

class _SwitchDemoState extends State<SwitchDemo> {
  bool _switchValue = false;
  @override
  Widget build(BuildContext context) {
    return Container(
        child: ListView(
      children: [
        ListTile(
          leading: Switch(
            value: _switchValue,
            onChanged: (bool val) {
              setState(() {
                _switchValue = val;
              });
            },
            activeColor: Colors.orange,
            activeTrackColor: Colors.pink,
            inactiveThumbColor: Colors.blue,
            inactiveTrackColor: Colors.black12,
          ),
          title: Text("当前状态${_switchValue == true ? "选" : '未选'}"),
        ),
        ListTile(
          leading: CupertinoSwitch(
              value: _switchValue,
              onChanged: (bool val) {
                setState(() {
                  _switchValue = val;
                });
              }),
        ),
        ListTile(
          leading: CupertinoSwitch(

              value: _switchValue,
              onChanged: (bool val) {
                setState(() {
                  _switchValue = val;
                });
              },
              activeColor: Colors.orange,
            trackColor: Colors.yellow,
          ),
        )
      ],
    ));
  }
}