基础widgets

news2024/11/20 1:34:39

1.widgets_文本和字体

在flutter当中几乎所有的对象都是widget,他跟原生开发的控线不一样,flutter开发当中,widget的概念更广泛一点,
不仅可以表示ui元素,也可以表示一些功能性的组件,例如手势检测等

  • 基础组件
    1. 文本和字体
      对于html当中对应就是lab或者label或者span这样的行内元素
      在这里插入图片描述
      在这里插入图片描述

2.widgets_按钮

在这里插入图片描述

3.widgets_图片和图标

图片

  1. 加载本地资源
  2. 加载网络资源
@override
Widget build(BuildContext context) {
	const style = TextStyle(
		color:const Color(0xffff0000),//Colors.yellow
		fontSize:20,
		fontFamily:'yahei',
		decoration: TextDecoration.underline,
		decorationStyle: TextDecorationStyle.dashed
	);
	return Scaffold(
		appBar: AppBar(
			title: Text('Hello world!'),
			actions: <Widget>[
				IconButton(
					icon: Icon(Icons.shopping cart),
					tooltip: 'Open shopping cart',
					onPressed: () {
						print('Shopping cart opened')
					},
				),
			],
		),
		body:Column(
			children: <Widget>[
				Image.asset(static/pircture/mvp.png,
				width:200,
				)//放图片路径,可以右击文件然后新建一个文件夹放图片
			]
		)
	)
}

这边要解开
在这里插入图片描述

  • 如果想加载网络图片
//network代表要使用网络资源
Image.network("http://......",
width:150)
//控制图片填充效果
fit:BoxFit.cover
//设定颜色混合(拿别的颜色混到图片里去)
color:Color.pink,
colorBlendMode:BlendMode.difference,

在这里插入图片描述

图标

  • 使用icon这个类
Icon(Icons.access_alarm)//闹铃图标

在这里插入图片描述

  • 如果图标不够用了,想使用一个新的图标,可以支持icon font(淘宝的矢量图标库)
    在这里插入图片描述
  • 解压缩包,找到ttf文件,就是我们要使用库
    在这里插入图片描述
  • 在pubspec中引入 在这里插入图片描述
  • 新建一个文件fonts来引入路径
  • 定义一个自己的图标库,在lib中定义一个Dart File文件叫Myicon.dart
import 'package:flutter/material.dart';
class MyIcon [
	static const IconData huawei = const IconData(
		0xe82e,
		fontFamily:'myGoodIcon',
		matchTextDirection: true
	);
	static const IconData oppo = const IconData(
		0xe82d,
		fontFamily:'myGoodIcon',
		matchTextDirection: true
	);
	static const IconData xiaomi= const IconData(
		0x832,
		fontFamily:'myGoodIcon',
		matchTextDirection: true
	);
]
  • 写完上面代码后,到main.dart文件中引入
import 'MYIcon.dart'
  • 然后就可以直接用了
    在这里插入图片描述
  • 可以设置颜色
Icon(MyIcon.huawei,color:Color.yellow)
  • pub里面报错的话,可能是缩进问题
    在这里插入图片描述

3.widgets_下拉框

  • 下拉框里面有选项,有选项的话还需要知道选的是第几个,这才是一个正真的下拉框
class MyDropDownButton extends StatefulWidgets {
	@override
	State<StatefulWidget> createState() {
 		return _MyDropDownButton();
	}
}

class _MyDropDownButton extends State<MyDropDownButton> {
	List getCityList() [
		List<DropdownMeunItem> cityList = new List();
		cityList.add(DropdownMenuItem(child: new Text("上海"), value:"shanghai"));
		cityList.add(DropdownMenuItem(child: new Text("北京"), value:"beijing"));
		cityList.add(DropdownMenuItem(child: new Text("广州"), value:"guangzhou"));
		cityList.add(DropdownMenuItem(child: new Text("深圳"), value:"shenzhen"));
		return cityList;
	]
	@override
	Widget build(BuildContext context) {
		return new Column(
			children:<Widget>[
				new DropdownButton(
					items:getCityList(),
					hint: new Text("请选择城市"),
					onChanged: null
				)
			]
		)
	}
}
  • 想要它显示出来,在Scaffold里面添加
    在这里插入图片描述
  • 还需要写一个变量来存选中的city
class MyDropDownButton extends StatefulWidgets {
	@override
	State<StatefulWidget> createState() {
 		return _MyDropDownButton();
	}
}

class _MyDropDownButton extends State<MyDropDownButton> {
	List getCityList() [
		List<DropdownMeunItem> cityList = new List();
		cityList.add(DropdownMenuItem(child: new Text("上海"), value:"shanghai"));
		cityList.add(DropdownMenuItem(child: new Text("北京"), value:"beijing"));
		cityList.add(DropdownMenuItem(child: new Text("广州"), value:"guangzhou"));
		cityList.add(DropdownMenuItem(child: new Text("深圳"), value:"shenzhen"));
		return cityList;
	]
	var selectedCity;
	@override
	Widget build(BuildContext context) {
		return new Column(
			children:<Widget>[
				new DropdownButton(
					items:getCityList(),
					hint: new Text("请选择城市"),
					value: selectedCity,
					onChanged: (val) {
						setState(() {
							this.selectedCity = val;//把值赋给临时变量
						});
					}
				)
			],
		);
	}
}

4.widgets_单选框多选框

单选框

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Single Selection Example'),
        ),
        body: SingleSelectionWidget(),
      ),
    );
  }
}

class SingleSelectionWidget extends StatefulWidget {
  @override
  _SingleSelectionWidgetState createState() => _SingleSelectionWidgetState();
}

class _SingleSelectionWidgetState extends State<SingleSelectionWidget> {
  String selectedFruit = '';

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        RadioListTile(
          title: Text('Apple'),
          value: 'apple',
          groupValue: selectedFruit,
          onChanged: (value) {
            setState(() {
              selectedFruit = value;
            });
          },
        ),
        RadioListTile(
          title: Text('Banana'),
          value: 'banana',
          groupValue: selectedFruit,
          onChanged: (value) {
            setState(() {
              selectedFruit = value;
            });
          },
        ),
      ],
    );
  }
}

多选框

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Multiple Selection Example'),
        ),
        body: MultipleSelectionWidget(),
      ),
    );
  }
}

class MultipleSelectionWidget extends StatefulWidget {
  @override
  _MultipleSelectionWidgetState createState() => _MultipleSelectionWidgetState();
}

class _MultipleSelectionWidgetState extends State<MultipleSelectionWidget> {
  List<String> selectedFruits = [];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        CheckboxListTile(
          title: Text('Strawberry'),
          value: selectedFruits.contains('strawberry'),
          onChanged: (value) {
            setState(() {
              if (value) {
                selectedFruits.add('strawberry');
              } else {
                selectedFruits.remove('strawberry');
              }
            });
          },
        ),
        CheckboxListTile(
          title: Text('Mango'),
          value: selectedFruits.contains('mango'),
          onChanged: (value) {
            setState(() {
              if (value) {
                selectedFruits.add('mango');
              } else {
                selectedFruits.remove('mango');
              }
            });
          },
        ),
      ],
    );
  }
}
  • 使用RadioListTile和CheckboxListTile小部件来创建单选框和多选框。通过修改value属性以及处理onChanged回调函数，您可以实现单选和多选的功能。

5.widgets_输入框

  • 在Flutter中，可以使用TextField小部件来创建输入框，让用户可以在应用程序中输入文本。TextField提供了各种属性和回调函数，以允许您自定义输入框的外观和行为
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Text Input Example'),
        ),
        body: TextInputWidget(),
      ),
    );
  }
}

class TextInputWidget extends StatefulWidget {
  @override
  _TextInputWidgetState createState() => _TextInputWidgetState();
}

class _TextInputWidgetState extends State<TextInputWidget> {
  TextEditingController _textEditingController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(16.0),
      child: TextField(
        controller: _textEditingController,
        decoration: InputDecoration(
          labelText: 'Enter your text here',
          border: OutlineInputBorder(),
        ),
      ),
    );
  }

  @override
  void dispose() {
    _textEditingController.dispose();
    super.dispose();
  }
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1687075.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Python变量、注释与数据类型

Python变量、注释与数据类型

大家好&#xff0c;Python 是一种强大而灵活的编程语言&#xff0c;被广泛用于各种领域&#xff0c;包括软件开发、数据分析、科学计算等。在 Python 中&#xff0c;变量、注释和数据类型是构建代码的基础&#xff0c;对于理解和掌握这些概念是至关重要的。本文将深入探讨 Pyth…
阅读更多...
数据库系统概论（超详解！！！）第九节 嵌入式SQL

数据库系统概论（超详解！！！）第九节 嵌入式SQL

SQL语言提供了两种不同的使用方式 &#xff1a;交互式&#xff0c; 嵌入式。 SQL语言是非过程性语言 。事务处理应用需要高级语言。 这两种方式细节上有差别&#xff0c;在程序设计的环境下&#xff0c;SQL语句要做某些必要的扩充。 1.嵌入式SQL的处理过程 嵌入式SQL是将SQL…
阅读更多...
SOA半导体光放大器及其应用

SOA半导体光放大器及其应用

---翻译自Michael Connelly于2015年发表的文章 1.简介 在过去的二十五年里&#xff0c;光纤通信网络的部署和容量迅速增长。这种增长得益于新光电技术的发展&#xff0c;这些技术可用于利用光纤的巨大带宽。如今&#xff0c;运行的系统比特率已超过 100 Gb/s。光技术是全球信…
阅读更多...
linux-x86_64-musl 里面的musl是什么意思？

linux-x86_64-musl 里面的musl是什么意思？

在一些开源库里面可以看到&#xff0c;linux-x86_64-musl类似于这样的字符串&#xff0c;这个musl是什么意思呢&#xff1f; 在字符串 "linux-x86_64-musl" 中&#xff0c;musl 指的是 musl libc&#xff0c;这是一个轻量级的 C 标准库实现。 让我们来拆解一下这个字…
阅读更多...
使用maven-helper插件解决jar包冲突

使用maven-helper插件解决jar包冲突

发现问题 maven-helper分析问题 如上所述&#xff0c;问题就是依赖版本冲突了&#xff0c;出现版本冲突的原因是因为由于Maven具有依赖传递性&#xff0c;所以当你引入一个依赖类的同时&#xff0c;其身后的依赖类也一起如过江之鲫纷至沓来了。 举个例子&#xff1a; 　　A依赖…
阅读更多...
软件详细规划与设计概览（软件概要文档、详细设计文档）

软件详细规划与设计概览（软件概要文档、详细设计文档）

1引言 1.1编写目的 1.2项目背景 1.3参考资料 2系统总体设计 2.1整体架构 2.2整体功能架构 2.3整体技术架构 2.4运行环境设计 2.5设计目标 3系统功能模块设计 3.1个人办公 4性能设计 4.1响应时间 4.2并发用户数 5接口设计 5.1接口设计原则 5.2接口实现方式 6运行设计 6.1运行模块…
阅读更多...
扫描链接打开小程序配置-谁看谁迷糊

扫描链接打开小程序配置-谁看谁迷糊

各位你们怎么理解这个规则&#xff1f;如果再多一条数据&#xff0c;和上面一样&#xff0c;只是测试范围为线上版本&#xff0c;又怎么解读&#xff1f; 反正以我对中文的掌握程度&#xff0c;我认为上面的规则是针对体验版的&#xff0c;符合规则的都跳转到体验版。新增的线上…
阅读更多...
How to record real IP of user on nginx?

How to record real IP of user on nginx?

应用(Docker)使用WAF接入internet&#xff0c;nginx log 查不到用户的真实IP地址&#xff0c;于是修改nginx 设置&#xff0c;以下都是在linux下操作&#xff1a; 由于没有WAF权限&#xff0c;所以在 docker上启动了两个container&#xff0c;一个模拟WAF(r-proxy)&#xff0c…
阅读更多...
mysql实战——mysql5.7升级到mysql8.0

mysql实战——mysql5.7升级到mysql8.0

1、上传mysql8.0压缩包到/usr/local目录下 tar -zxvf mysql-8.0.25-linux-glibc2.12-x86_64.tar.xz mv mysql-8.0.25-linux-glibc2.12-x86_64 mysql8 #更改文件夹所属 chown -R mysql.mysql /usr/local/mysql8/ 2、更改配置文件my.cnf vi /etc/my.cnf # 最后几个for8.0的参数要…
阅读更多...
GEO数据挖掘-PCA、差异分析

GEO数据挖掘-PCA、差异分析

From 生物技能树 GEO数据挖掘第二节 文章目录 探针注释自主注释流程(了解)PCA图、top1000基因热图探针注释查看示例代码 top 1000 sd 热图离散基因热图&#xff0c;top1000表达基因&#xff0c;只是看一下&#xff0c;不用放文章里 差异分析火山图差异基因热图转换id富集分析-K…
阅读更多...
无人机集群路径规划：遗传算法求解无人机集群路径规划，提供MATLAB代码

无人机集群路径规划：遗传算法求解无人机集群路径规划，提供MATLAB代码

一、单个无人机路径规划模型介绍 无人机三维路径规划是指在三维空间中为无人机规划一条合理的飞行路径&#xff0c;使其能够安全、高效地完成任务。路径规划是无人机自主飞行的关键技术之一&#xff0c;它可以通过算法和模型来确定无人机的航迹&#xff0c;以避开障碍物、优化…
阅读更多...
基于springboot的毕业设计系统的开发源码

基于springboot的毕业设计系统的开发源码

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的毕业设计系统的开发。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 毕业设计系统能够实现…
阅读更多...
微软：最新ChatGPT-4o模型，可在 Azure OpenAI上使用

微软：最新ChatGPT-4o模型，可在 Azure OpenAI上使用

北京时间5月14日凌晨&#xff0c;OpenAI 一场不到 30 分钟的发布会&#xff0c;正式发布了 GPT-4o&#xff0c;视频语音交互丝滑到吓人&#xff0c;还即将免费可用&#xff01; GPT-4o&#xff0c;其中的「o」代表「omni」&#xff08;即全面、全能的意思&#xff09;&#xff…
阅读更多...
和程序员de 相处之道

和程序员de 相处之道

1、不要"一遇到问题就去找程序员" 通常&#xff0c;技术问题通过阅读使用说明就可以解决。比如你刚买了一个新的播放器&#xff0c;想要把它连接到你的电视&#xff0c;你只需要找到使用手册里关于如何连接接口的那一页即可。 错误信息通常会被很清晰地列出来。通过…
阅读更多...
需不需要选数据结构和算法的课程？

需不需要选数据结构和算法的课程？

网络工程是互联网方向&#xff1f; 不过如果你想走机器学习和大数据方向的话&#xff0c;数据结构以及算法应该说是必修了吧。刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「数据结构的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“88…
阅读更多...
XShell-连接-Centos 7

XShell-连接-Centos 7

XShell 连接Centos 7 一.准备 安装XShell XShell下载地址&#xff1a; 在虚拟机上安装Centos 7&#xff0c;具体操作自行学习 二.Centos 7的准备 1.网络适配器修改为NAT 2.获取IP 输入命令&#xff1a; ip addr我的Centos 7对外IP为192.168.174.129 三.XShell连接Cento…
阅读更多...
全志T527芯片详解【一】：计算性能

全志T527芯片详解【一】：计算性能

高效架构 性能稳健 内置8*ARM Cortex-A55&#xff0c;8核主频可运行至1.8GHz&#xff0c;提供更稳健强劲的处理能力 Octa-core ARM Cortex-A55 in a DynamlQ big.LITTLE configuration, up to 1.8 GHz32KB L1 I-cache and 32KB L1 D-cache per A55 coreOptional 64KB L2 cach…
阅读更多...
Linux 如何用上次的checkpoint文件dist_train.sh 接着训练【mmdetection】

Linux 如何用上次的checkpoint文件dist_train.sh 接着训练【mmdetection】

在Linux环境下&#xff0c;如果你想要用上一次的checkpoint文件继续训练&#xff0c;你可以在你的dist_train.sh脚本中设置--resume_from参数。这个参数指定了checkpoint文件的路径&#xff0c;训练会从该文件的状态继续进行。 例如&#xff0c;如果你的checkpoint文件名为las…
阅读更多...
海山数据库（He3DB）线程池方案详解

海山数据库（He3DB）线程池方案详解

前言 对于应用开发人员来说肯定听说过连接池&#xff0c;却不一定听说过线程池&#xff0c;虽然二者都是池化的概念&#xff0c;但还是有所不同的&#xff1a; 连接池面向的是数据库连接&#xff0c;是针对数据库Client侧的优化。连接池可将数据库连接数固定在一定范围内&#…
阅读更多...
Unity3D读取Excel表格写入Excel表格

Unity3D读取Excel表格写入Excel表格

系列文章目录 unity工具 文章目录 系列文章目录&#x1f449;前言&#x1f449;一、读取Excel表格&#x1f449;二、写入Excel表格&#x1f449;三、Fileinfo和Directoryinfo的操作&#x1f449;四、壁纸分享&#x1f449;总结 &#x1f449;前言 有时候难免会遇到读取文件写…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023