flutter学习之基础组件（七）

最新推荐文章于 2024-08-27 07:41:03 发布
最新推荐文章于 2024-08-27 07:41:03 发布
阅读量437 收藏 1
点赞数 1
文章标签： android flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a130226123/article/details/119249715
版权

flutter学习之基础组件（七）

本节主要学习输入框和选择控件以及日期组件

文章目录

一、TextField文本输入框

TextField 表单常见属性：
在这里插入图片描述
在这里插入图片描述

具体各种实现代码：

class _FormContentState extends State<FormContent> {
  late TextEditingController _username;
  var textUsername = "初始值";

  @override
  void initState() {
    super.initState();
    _username = new TextEditingController(text: "初始值12312");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("表单演示页面"),
      ),
      body: Padding(
        padding: EdgeInsets.all(20),
        child: ListView(
          children: [
            TextField(),
            SizedBox(
              height: 10,
            ),
            TextField(
              decoration: InputDecoration(
                  hintText: "请输入账号", border: OutlineInputBorder() //设置外部边框
                  ),
            ),
            SizedBox(
              height: 10,
            ),
            TextField(
              maxLines: 2,
              decoration: InputDecoration(
                  hintText: "多行文本框", border: OutlineInputBorder() //设置外部边框
                  ),
            ),
            SizedBox(
              height: 10,
            ),
            TextField(
              obscureText: true, //设置显示密码框
              decoration: InputDecoration(
                  hintText: "密码框", border: OutlineInputBorder() //设置外部边框
                  ),
            ),
            SizedBox(
              height: 10,
            ),
            TextField(
              decoration: InputDecoration(
                  hintText: "用户名",
                  border: OutlineInputBorder(), //设置外部边框
                  labelText: "用户名"),
            ),
            SizedBox(
              height: 10,
            ),
            TextField(
              decoration: InputDecoration(
                hintText: "文本框设置图标",
                icon: Icon(Icons.people),
                border: OutlineInputBorder(), //设置外部边框
              ),
            ),
            SizedBox(
              height: 10,
            ),
            TextField(
                decoration: InputDecoration(
                  hintText: "获取文本内容",
                  border: OutlineInputBorder(), //设置外部边框
                ),
                controller: _username,
                onChanged: (value) {
                  setState(() {
                    _username.text = value;
                  });
                }),
            SizedBox(
              height: 20,
            ),
            Container(
              height: 40,
              width: double.infinity,
              child: ElevatedButton(
                  onPressed: () {
                    setState(() {
                      textUsername = _username.text;
                    });
                  },
                  child: Text("获取文本内容")),
            ),
            SizedBox(
              height: 20,
            ),
            Text(textUsername)
          ],
        ),
      ),
    );
  }
}

二、Checkbox、CheckboxListTile多选框组件

1.Checkbox

在这里插入图片描述
在这里插入图片描述

2.CheckboxListTile

在这里插入图片描述
在这里插入图片描述


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

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

class _CheckBoxContentState extends State<CheckBoxContent> {
  var flag = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("CheckBox演示页面"),
      ),
      body: Padding(
        padding: EdgeInsets.all(20),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Checkbox(
                    value: flag,
                    onChanged: (value) {
                      setState(() {
                        this.flag = value!;
                      });
                    },
                    checkColor: Colors.white,
                    activeColor: Colors.red),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [Text(this.flag ? "选中" : "未选中")],
            ),
            SizedBox(
              height: 20,
            ),
            Divider(),
            SizedBox(
              height: 20,
            ),
            CheckboxListTile(
              value: flag,
              onChanged: (value) {
                setState(() {
                  this.flag = value!;
                });
              },
              title: Text("选择"),
              subtitle: Text("请选择"),
              secondary: Icon(Icons.home),
            )
          ],
        ),
      ),
    );
  }
}

三、Radio、RadioListTile单选按钮组件和Switch开关组件

1.Radio

在这里插入图片描述

2.RadioListTile

在这里插入图片描述

3.Switch

在这里插入图片描述
在这里插入图片描述


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

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

class _RadioDemoContentState extends State<RadioDemoContent> {
  var _sex;
  var flag = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Radio演示页面"),
      ),
      body: Container(
        alignment: Alignment.center,
        child: Column(
          children: [
            Text("Radio"),
            Divider(),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text("男"),
                Radio(
                    value: 1,
                    groupValue: this._sex,
                    onChanged: (value) {
                      setState(() {
                        this._sex = value;
                      });
                    }),
                SizedBox(
                  width: 20,
                ),
                Text("女"),
                Radio(
                    value: 2,
                    groupValue: this._sex,
                    onChanged: (value) {
                      setState(() {
                        this._sex = value;
                      });
                    }),
              ],
            ),
            Divider(),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text("${this._sex}"),
                Text(this._sex == 1 ? "男" : "女")
              ],
            ),
            Divider(),
            Text("RadioListTile"),
            Divider(),
            RadioListTile(
              value: 1,
              groupValue: this._sex,
              onChanged: (v) {
                setState(() {
                  this._sex = v;
                });
              },
              title: Text("选择1"),
              subtitle: Text("请选择1"),
              secondary: Icon(Icons.home),
            ),
            RadioListTile(
              value: 2,
              groupValue: this._sex,
              onChanged: (v) {
                setState(() {
                  this._sex = v;
                });
              },
              title: Text("选择2"),
              subtitle: Text("请选择2"),
              secondary: Icon(Icons.home),
            ),
            RadioListTile(
              value: 3,
              groupValue: this._sex,
              onChanged: (v) {
                setState(() {
                  this._sex = v;
                });
              },
              title: Text("选择3"),
              subtitle: Text("请选择3"),
              secondary: Icon(Icons.home),
            ),
            Divider(),
            Text("Switch开关"),
            Divider(),
            Switch(
                value: this.flag,
                onChanged: (v) {
                  setState(() {
                    this.flag = v;
                  });
                })
          ],
        ),
      ),
    );
  }
}

四、混合实现一个学员信息上报系统

通过TextFiled，CheckBoX，Radio实现一个上报数据页面，效果：
在这里插入图片描述
代码：


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

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

class _blendContentState extends State<blendContent> {
  late String _username;
  var _sex;
  String data = "";

  List hobby = [
    {"check": true, "titile": "吃饭"},
    {"check": false, "titile": "睡觉"},
    {"check": false, "titile": "打豆豆"},
  ];

  void _setRadioChanged(v) {
    setState(() {
      this._sex = v;
    });
  }

  List<Widget> _gerHobby() {
    List<Widget> list = [];
    for (var i = 0; i < hobby.length; i++) {
      list.add(Text(this.hobby[i]["titile"]+":"));
      list.add(Checkbox(
        value: this.hobby[i]["check"],
        onChanged: (bool? value) {
          setState(() {
            this.hobby[i]["check"] = value;
          });
        },
      ));
    }

    return list;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("学员信息上报系统"),
      ),
      body: Container(
        padding: EdgeInsets.all(10),
        child: Column(
          children: [
            TextField(
              decoration: InputDecoration(
                  hintText: "请输入用户信息",
                  border: OutlineInputBorder(), //设置外部边框
                  labelText: "用户名"),
              onChanged: (v) {
                setState(() {
                  this._username = v;
                });
              },
            ),
            Row(
              children: [
                Text("男："),
                Radio(
                    value: 1,
                    groupValue: this._sex,
                    onChanged: this._setRadioChanged),
                SizedBox(
                  width: 20,
                ),
                Text("女："),
                Radio(
                    value: 2,
                    groupValue: this._sex,
                    onChanged: this._setRadioChanged),
              ],
            ),
            Column(
              children: [
                Text("爱好："),
                Row(
                  children: _gerHobby(),
                ),
              ],
            ),

            SizedBox(
              height: 20,
            ),
            Container(
              width: double.infinity,
              height: 40,
              child: ElevatedButton(
                onPressed: () {
                  setState(() {
                    data = "上报成功：姓名：${this._username}  性别：${this._sex} 爱好：${hobby}";
                  });
                },
                child: Text("上报信息"),
              ),
            ),
            Divider(),
            Text(data),
          ],
        ),
      ),
    );
  }
}

五、Flutter日期和时间戳

获取当前日期：

var _now = new DateTime.now();
print(_now);

日期转换成时间戳 13位

    var time = _now.microsecondsSinceEpoch;
    print(time); //转换成时间戳  1627454464973662

时间戳转化成日期：

    var dateTime = DateTime.fromMillisecondsSinceEpoch(1627454464973662);
    print(dateTime); //时间戳转时间

1.flutter自带日期组件和时间组件

flutter的日期组件是showDatePicker ,时间组件是showTimePicker，效果图如下：

在这里插入图片描述
相关代码：


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

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

class _SystemDataContentState extends State<SystemDataContent> {
  var _now = new DateTime.now();
  var _nowTime = TimeOfDay.fromDateTime(new DateTime.now());

  _showDataPicker() async {
    var result = await showDatePicker(
      context: context,
      initialDate: _now,
      firstDate: DateTime(1980),
      lastDate: DateTime(2025),
      locale: Locale('zh'),
    );

    setState(() {
      this._now = result!;
    });
  }

  _showTimePicker() async {
    var result = await showTimePicker(
      context: context,
      initialTime: _nowTime,
    );

    setState(() {
      this._nowTime = result!;
    });
  }

  @override
  void initState() {
    super.initState();

    print(_now);
    var time = _now.microsecondsSinceEpoch;
    print(time); //转换成时间戳  1627454464973662
    var dateTime = DateTime.fromMillisecondsSinceEpoch(1627454464973662);
    print(dateTime); //时间戳转时间
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("系统日期"),
      ),
      body: Padding(
        padding: EdgeInsets.all(10),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            //给组件设置点击事件
            InkWell(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text("${this._now}"),
                  Icon(Icons.all_inclusive_sharp)
                ],
              ),
              onTap: () {
                _showDataPicker();
              },
            ),
            InkWell(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text("${formatDate(this._now, [yyyy, "年", mm, "月", dd])}"),
                  Icon(Icons.all_inclusive_sharp)
                ],
              ),
              onTap: () {
                _showDataPicker();
              },
            ),
            InkWell(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text("${this._nowTime.format(context)}"),
                  Icon(Icons.timelapse)
                ],
              ),
              onTap: () {
                _showTimePicker();
              },
            ),
          ],
        ),
      ),
    );
  }
}

系统默认的日历是英文的，想要显示中文需要实现国际化，实现国际化首先需要在pubspec.yaml文件的
dependencies下添加：

#  国际化
  flutter_localizations:
    sdk: flutter

然后在主页MaterialApp下配置如下代码：

import 'package:flutter_localizations/flutter_localizations.dart'; 

 //下面两行配置国际化
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('zh', 'CH'),
        const Locale('en', 'US'),
      ],

在这里插入图片描述
再然后在需要实现国际化的控件配置相关国际化的代码：
在这里插入图片描述
这样就实现国际化了

2.使用三方日期组件

先打开三方库查找网页https://pub.flutter-io.cn/
然后搜索flutter_datetime_picker并且按照集成文档，集成到项目中
在这里插入图片描述

  flutter_datetime_picker: ^1.5.1

效果图如下：
在这里插入图片描述
相关代码：


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

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

class _OtherDataContentState extends State<OtherDataContent> {

  DateTime _nowDate = new DateTime.now();
  TimeOfDay _nowTime = TimeOfDay.fromDateTime(new DateTime.now());

  _showDataPicker() {
    DatePicker.showDatePicker(context,
        showTitleActions: true,
        minTime: DateTime(2015, 3, 5),
        maxTime: DateTime(2025, 6, 7), onChanged: (date) {
      print('change $date');
    }, onConfirm: (date) {
      setState(() {
        this._nowDate = date;
      });
    }, currentTime: DateTime.now(), locale: LocaleType.zh);
  }

  _showDataTimePicker() {
    DatePicker.showDateTimePicker(context,
        showTitleActions: true,
        minTime: DateTime(2015, 3, 5),
        maxTime: DateTime(2025, 6, 7), onChanged: (date) {
          print('change $date');
        }, onConfirm: (date) {
          setState(() {
            this._nowDate = date;
          });
        }, currentTime: DateTime.now(), locale: LocaleType.zh);
  }

  _showTimePicker() {
    DatePicker.showTimePicker(context,
        showTitleActions: true,
        onChanged: (date) {
          print('change $date');
        }, onConfirm: (date) {
          setState(() {
            this._nowTime = date as TimeOfDay;
          });
        }, currentTime: DateTime.now(), locale: LocaleType.zh);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("三方日期组件flutter_datetime_picker"),
      ),
      body: Container(
        padding: EdgeInsets.all(10),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              InkWell(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [Text("${formatDate(this._nowDate, [yyyy, "-", mm, "-", dd])}"), Icon(Icons.arrow_drop_down)],
                ),
                onTap: _showDataPicker,
              ),
              InkWell(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [Text("${this._nowTime.format(context)}"), Icon(Icons.arrow_drop_down)],
                ),
                onTap: _showTimePicker,
              ),
              InkWell(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [Text("${formatDate(this._nowDate, [yyyy, '-', mm, '-', dd," ",HH, ':', nn, ':', ss])}"), Icon(Icons.arrow_drop_down)],
                ),
                onTap: _showDataTimePicker,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

总结

a130226123
关注
Flutter：功能型组件（1）- 日期选择器、时间选择器
weixin_41897680的博客
05-30 2216
Flutter：功能型组件（1）- 日期选择器、时间选择器
Flutter之日期选择器 calendar_date_picker2
weixin_43244083的博客
07-11 3570
此小部件仅包含日历 UI，并且每当用户点击不同的日期时就会发出事件。(用户可以选择的最早允许的 DateTime)(提供对日历中可以选择的日期的完全控制的功能)(用于在控件中集中年份和月份文本标签的标志)(一周的第一天，0表示周日，6表示周六)(提供对日历日文本样式的完全控制的功能)(所选范围内包含的日期的突出显示颜色)(日历模式切换控件的自定义文本样式)(日历模式切换控件的自定义文本样式。(选定日历日文本的自定义文本样式）(选定范围日历日的自定义文本样式)(模式选择器按钮图标的自定义图标)
日期时间选择器插件：datetime_picker_formfield 使用指南
最新发布
gitblog_00902的博客
08-27 794
日期时间选择器插件：datetime_picker_formfield 使用指南 datetime_picker_formfieldA Flutter widget that wraps a TextFormField and integrates the date and/or time picker dialogs.项目地址:https://gitcode.com/gh_mirrors/da...
Flutter开发之——日期选择器
2401_84121935的博客
04-05 1686
答应大伙的备战金三银四，大厂面试真题来啦！这份资料我从春招开始，就会将各博客、论坛。网站上等优质的Android开发中高级面试题收集起来，然后全网寻找最优的解答方案。每一道面试题都是百分百的大厂面经真题+最优解答。包知识脉络 + 诸多细节。节省大家在网上搜索资料的时间来学习，也可以分享给身边好友一起学习。《960全网最全Android开发笔记》《379页Android开发面试宝典》包含了腾讯、百度、小米、阿里、乐视、美团、58、猎豹、360、新浪、搜狐等一线互联网公司面试被问到的题目。
Flutter 组件集录 | 日期范围组件 - DateRangePickerDialog
张风捷特烈的博客
10-11 664
theme: cyanosis 持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第 3 天，点击查看活动详情 前言 今天随手翻翻源码，突然看到 showDateRangePicker，心中狂喜。原来 Flutter 早已将 日期范围选择器 内置了，可能有些小伙伴已经知道，但应该还有一部分朋友不知道。想当年，为了日期范围选择可吃了不少坑。做为 Flutter 内置...
Flutter开发之——日期选择器(1)
2301_79985012的博客
04-10 590
)
Flutter学习基础组件之StackPositioned.pdf
05-08
精品资料欢迎下载
Flutter基础学习之自定义组件
09-05
在`07基础组件`这个文件中，你可能会找到关于这些概念的实例代码，通过阅读和实践这些代码，你可以更好地理解和掌握如何在Flutter中创建自定义组件。不断练习和探索，将使你成为更出色的Flutter开发者，能够构建出...
flutter学习，基础框架搭建
06-27
`MaterialApp`是Flutter框架提供的一个基础组件，用于设置应用的主题、路由和其他全局配置。 在`pubspec.yaml`文件中，你可以列出你的项目依赖。当你运行`flutter pub get`命令时，这些依赖会被自动下载并添加到...
flutter开发之组件大全
06-12
Flutter以其Dart编程语言为基础，为开发者提供了丰富的组件库，使得创建美观且响应迅速的用户界面变得简单。 在Flutter开发中，组件是构建应用程序的基础单元，它们就像是乐高积木，可以自由组合以形成各种复杂的...
Flutter基础学习PDF
09-05
7. **设计基础之主题共享颜色和字体样式**（07章节）：Flutter允许开发者自定义全局的主题，包括颜色、字体和间距等。这部分将指导你如何创建和应用自定义主题，以保持应用的视觉一致性。 通过这些PDF教程，你将...
Flutter 日期时间DatePicker控件及国际化
08-19
主要介绍了Flutter 日期时间DatePicker控件及国际化，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Flutter上的一个日历控件可以定制成自己想要的样子
08-10
Flutter上的一个日历控件，可以定制成自己想要的样子
date_and_time_picker,在android和ios上的flutter应用程序中显示时间和日期选择器。.zip
09-24
在android和ios上的flutter应用程序中显示时间和日期选择器。
Flutter教程之在 Flutter 中显示 TextField 上的日期选择器（教程含源码）
iCloudEnd的博客
11-06 514
Flutter 中的日期选择器——Flutter 日期范围选择器是一个轻量级的小部件，它允许用户轻松选择单个日期、多个日期或一个日期范围。日期选择器提供月、年、十年和世纪视图选项，以快速导航到所需的日期。
Flutter 日期选择控件使用实战
热门推荐
卜大爷的博客
12-28 2万+
Flutter 日期选择控件使用实战 日期选择是 App 开发中的常见功能，本文我们将学习如何在 Flutter 中使用日期选择控件。 日历控件显示的几种方式 flutter 包含日历和时间控件，有以下几种： DayPicker：已弃用。v1.15.3之后改用 CalendarDatePicker。 CalendarDatePicker：1.5版后面的日期选择控件，替代了 YearPicker、MonthPicker、DayPicker。 CupertinoDatePicker、CupertinoTim
【Flutter】【日期选择框】DatePickerDialog，showTimePicker和CupertinoDatePicker，CupertinoTimerPicker
自动人生博客
11-28 3229
flutter 内置了安卓和ios 样式的日期选择框，你可以使用，当然如果觉得不好用的话，也有可以使用的第三方非插件，可以使用，具体可以到市场查阅比如：table_calendar等});} String btn1 = '选择日期showDatePicker';String btn2 = '选择日期CupertinoDatePicker';String timeM = "时间选择 Material=>";String timeM2 = "时间选择 Cupertino=>";
Flutter中的选择器（时间、自定义单项）
season_26的博客
06-14 642
弹窗实现可以参考之前的文章。
掌握Flutter基础组件：打造绚丽UI界面
作者作为一名前端开发者，决定学习并分享自己的学习过程，通过一系列文章如"用Flutter构建漂亮的UI界面-基础组件篇"，"Flutter滚动型容器组件-ListView篇"和"Flutter网格型布局-GridView篇"，深入浅出地探讨核心组件...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值