当前位置： 首页 > article >正文

Flutter_学习记录_基本组件的使用记录_2

article 2025/2/12 5:38:09

1. PopupMenuButton的使用

代码案例：

import 'package:flutter/material.dart';

// ----PopupMemuButtonDemo的案例----
class PopupMemuButtonDemo extends StatefulWidget {
  const PopupMemuButtonDemo({super.key});

  @override
  State<PopupMemuButtonDemo> createState() => _PopupMemuButtonDemoState();
}

class _PopupMemuButtonDemoState extends State<PopupMemuButtonDemo> {
  String _currentMenuItem = "Home";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("PopupMemuButtonDemo"),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(_currentMenuItem),
                PopupMenuButton(
                  onSelected: (value) {
                    print(value);
                    setState(() {
                      _currentMenuItem = value;
                    });
                  },
                  itemBuilder: (BuildContext context) => [
                    PopupMenuItem(value: "Home", child: Text("Home")),
                    PopupMenuItem(value: "Discover", child: Text("Discover") ),
                    PopupMenuItem(value: "My", child: Text("My"))
                  ],
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

效果图如下:
在这里插入图片描述

2. Checkbox 和 CheckboxListTile 的使用

代码案例：

import 'package:flutter/material.dart';

class CheckBoxDemo extends StatefulWidget {
  const CheckBoxDemo({super.key});

  @override
  State<CheckBoxDemo> createState() => _CheckBoxDemoState();
}

class _CheckBoxDemoState extends State<CheckBoxDemo> {

  bool _checkboxItemA = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("CheckBoxDemo"),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CheckboxListTile(
              value: _checkboxItemA, 
              onChanged: (value){
                setState(() {
                  if (value != null) {
                    _checkboxItemA = value;
                  }
                });
              },
              title: Text("Checkbox Item A"),
              subtitle: Text("Description"),
              secondary: Icon(Icons.bookmark),
              selected: _checkboxItemA,
              activeColor: Colors.green,
            ),

            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Checkbox(
                  value: _checkboxItemA, 
                  onChanged: (value) {
                    setState(() {
                      if (value != null) {
                        _checkboxItemA = value;
                      }
                    });
                  },
                  activeColor: Colors.green,
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

效果图如下:
在这里插入图片描述

3. Radio 和 RadioListTile的使用

代码案例如下：

import 'package:flutter/material.dart';

class RadioDemo extends StatefulWidget {
  const RadioDemo({super.key});

  @override
  State<RadioDemo> createState() => _RadioDemoState();
}

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

  void _handleRadioValueChanged (int? value) {
    setState(() {
      if (value != null) {
        _radioGroupA = value;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("RadioDemo"),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text("男"),
                Radio(
                  value: 0, 
                  groupValue: _radioGroupA, 
                  onChanged: _handleRadioValueChanged,
                  activeColor: Colors.green,
                ),
                SizedBox(width: 32.0),
                Text("女"),
                Radio(
                  value: 1, 
                  groupValue: _radioGroupA, 
                  onChanged: _handleRadioValueChanged,
                  activeColor: Colors.green,
                ),
              ],
            ),
            SizedBox(height: 32.0),
            RadioListTile(
                  value: 0, 
                  groupValue: _radioGroupA, 
                  onChanged: _handleRadioValueChanged,
                  activeColor: Colors.green,
                  title: Text("Option A"),
                  subtitle: Text("Description"),
                  secondary: Icon(Icons.filter_1_outlined),
                  selected: _radioGroupA == 0,
                ),
                RadioListTile(
                  value: 1, 
                  groupValue: _radioGroupA, 
                  onChanged: _handleRadioValueChanged,
                  activeColor: Colors.green,
                  title: Text("Option B"),
                  subtitle: Text("Description"),
                  secondary: Icon(Icons.filter_2_outlined),
                  selected: _radioGroupA == 1,
                ),
          ],
        ),
      ),
    );
  }
}

效果图如下：
在这里插入图片描述

4. Switch 和 SwitchListTile 的案例

import 'package:flutter/material.dart';

class Switchdemo extends StatefulWidget {
  const Switchdemo({super.key});

  @override
  State<Switchdemo> createState() => _SwitchdemoState();
}

class _SwitchdemoState extends State<Switchdemo> {
  bool _switchItemA = false;

  void _handleSwitchValueChanged(bool? value) {
    setState(() {
      if (value != null) {
        _switchItemA = value;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("SwitchDemo"),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(_switchItemA ? "已打开" : "未打开", style: TextStyle(fontSize: 24.0)),
                Switch(
                  value: _switchItemA, 
                  onChanged: _handleSwitchValueChanged,
                  activeColor: Colors.lightGreen,
                )
              ],
            ),

            SwitchListTile(
              value: _switchItemA, 
              onChanged: _handleSwitchValueChanged,
              title: Text("Switch Item A"),
              subtitle: Text("Description"),
              secondary: Icon(_switchItemA ? Icons.visibility : Icons.visibility_off),
              selected: _switchItemA,
            )
          ],
        ),
      ),
    );
  }
}

效果图如下：
在这里插入图片描述

5. Slider 的使用

代码案例：

import 'package:flutter/material.dart';

class SliderDemo extends StatefulWidget {
  const SliderDemo({super.key});

  @override
  State<SliderDemo> createState() => _SliderDemoState();
}

class _SliderDemoState extends State<SliderDemo> {
  double _sliderItemA = 0.0;

  void _handleSliderValueChanged(double? value) {
    setState(() {
      if (value != null) {
        _sliderItemA = value;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("SliderDemo"),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Slider(
              value: _sliderItemA, 
              onChanged: _handleSliderValueChanged,
              activeColor: Colors.green,
              inactiveColor: Colors.grey[100],
              min: 0.0, // 设置最小值
              max: 10.0, // 设置最大值
              divisions: 10, // 分割为几份
              label: "${_sliderItemA.toInt()}", // 标签
            ),
            SizedBox(height: 18.0),
            Text("SliderValue: $_sliderItemA")
          ],
        ),
      ),
    );
  }
}

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

6. 时间选择器的简单使用

代码案例：

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'dart:async';

class DatetimeDemo extends StatefulWidget {
  const DatetimeDemo({super.key});

  @override
  State<DatetimeDemo> createState() => _DatetimeDemoState();
}

class _DatetimeDemoState extends State<DatetimeDemo> {

  DateTime selectedDate = DateTime.now();

  TimeOfDay selectedTime = TimeOfDay(hour: 9, minute: 30);

  Future<void> _selectedDate() async {
    final DateTime? date = await showDatePicker(
      context: context, 
      initialDate: selectedDate,
      firstDate: DateTime(1900), 
      lastDate: DateTime(2100),
    );

    if (date != null) {
      setState(() {
        selectedDate = date;
      });
    }
  }

  Future<void> _selectedTime() async {
    final TimeOfDay? time = await showTimePicker(
      context: context, 
      initialTime: selectedTime
    );

    if (time != null) {
      selectedTime = time;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("DateTimeDemo"),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            InkWell(
              onTap: _selectedDate,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(DateFormat.yMMMd().format(selectedDate), style: TextStyle(fontSize: 18.0)),
                  Icon(Icons.arrow_drop_down),
                ],
              ),
            ),
            SizedBox(height: 18.0),
            InkWell(
              onTap: _selectedTime,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(selectedTime.format(context), style: TextStyle(fontSize: 18.0)),
                  Icon(Icons.arrow_drop_down),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

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


http://www.kler.cn/a/541647.html

相关文章：

  • Baumer工业相机堡盟工业相机如何实现一次图像采集同时检测产品的5个面甚至多个面（C#）（NEOAPI SDK）
  • CSS3+动画
  • 荣耀手机Magic3系列、Magic4系列、Magic5系列、Magic6系列、Magic7系列详情对比以及最新二手价格预测
  • 数字滤波器的分类
  • 【开源AI】AI一页一页读PDF
  • PyQt学习记录
  • 后盾人JS -- 异步编程，宏任务与微任务
  • HTML之JavaScript对象声明
  • MySQL下载过程
  • Flink内存配置和优化
  • 五十天精通硬件设计第27天-时域频域知识
  • Django中select_related 的作用
  • C++适用于所有输入法的解决方案(切换输入法）
  • GPIO函数详解（二）
  • pytest测试专题 - 1.2 如何获得美观的测试报告
  • 【Vue中BUG解决】npm error path git
  • ThreadLocal 原理?需要注意什么？
  • 自动控制视频讲解
  • CCFCSP备考第二天
  • 2.协同过滤算法
  • 第四期书生大模型实战营-第4关-L2G4000
  • 【RabbitMQ的监听器容器Simple和Direct】 实现和场景区别
  • 计算机视觉的研究方向、发展历程、发展前景介绍
  • Java网络编程学习(一)
  • 【leetcode 28】27.移除元素==双指针==
  • 【系统架构设计师】面向架构评估的质量属性