Flutter基础控件

Text:文字

Text("Flutter")

 Text是最常用也是最基础的，目前学习阶段只用来加载文字数据，更多属性和样式设置请查看源码自己探索。

Button:按钮

 ElevatedButton:普通按钮

ElevatedButton(onPressed: () {if (kDebugMode) {print("ElevatedButton");}},child: const Text("普通按钮"),
),

TextButton:文本按钮

TextButton(onPressed: () {if (kDebugMode) {print("TextButton");}},child: const Text("文本按钮"),
),

 OutlinedButton:带边框按钮

OutlinedButton(onPressed: () {if (kDebugMode) {print("OutlinedButton");}},child: const Text("带边框的按钮"),
),

 IconButton:图片按钮

IconButton(onPressed: () {if (kDebugMode) {print("IconButton");}},icon: const Icon(Icons.thumb_up),
)

 带图片的文本按钮，只需要在各控件后加.icon就可以了

ElevatedButton.icon(onPressed: () {if (kDebugMode) {print('点击了发送按钮');}},icon: const Icon(Icons.send),label: const Text("发送"),
),

 自定义样式按钮

 ElevatedButton(style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Colors.red), //背景颜色foregroundColor:MaterialStateProperty.all(Colors.white), //文字图标颜色),onPressed: () {if (kDebugMode) {print("ElevatedButton");}},child: const Text("普通按钮"),)

大按钮和设置按钮大小可以在容器里面设置按钮 

Container(width: 100,height: 60,margin: const EdgeInsets.all(10),child: ElevatedButton.icon(onPressed: () {},icon: const Icon(Icons.search),label: const Text("搜索"),),

 加样式的各种圆角和边框按钮

Row(mainAxisAlignment: MainAxisAlignment.spaceAround,children: [ElevatedButton(style: ButtonStyle(shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(20),),),),onPressed: () {},child: const Text("圆角"),),ElevatedButton(style: ButtonStyle(shape: MaterialStateProperty.all(const RoundedRectangleBorder(borderRadius: BorderRadius.only(topLeft: Radius.circular(20),bottomRight: Radius.circular(20),),),),),onPressed: () {},child: const Text("任意圆角"),),ElevatedButton(style: ButtonStyle(shape: MaterialStateProperty.all(const RoundedRectangleBorder(borderRadius: BorderRadius.vertical(top: Radius.circular(0),bottom: Radius.circular(20),),),),),onPressed: () {},child: const Text("纵横圆角"),),SizedBox(width: 60,height: 60,child: ElevatedButton(style: ButtonStyle(//按钮样式设置shape: MaterialStateProperty.all(const CircleBorder(side: BorderSide(width: 2, //边框宽度color: Colors.red, //边框颜色),),),),onPressed: () {},child: const Text("圆形"),),),],
),
const SizedBox(height: 10),
Row(mainAxisAlignment: MainAxisAlignment.spaceAround,children: [OutlinedButton(style: ButtonStyle(side: MaterialStateProperty.all(//修改边框颜色和宽度const BorderSide(width: 2,color: Colors.red,),),),onPressed: () {},child: const Text("带边框的按钮"),)],
),

 完整代码：

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(theme: ThemeData(primarySwatch: Colors.blue),home: Scaffold(appBar: AppBar(title: const Text("Flutter"),),body: const MyHomePage(),),);}
}class MyHomePage extends StatelessWidget {const MyHomePage({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return const LayoutDemo();}
}class LayoutDemo extends StatelessWidget {const LayoutDemo({super.key});@overrideWidget build(BuildContext context) {return ListView(children: [Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [ElevatedButton(onPressed: () {if (kDebugMode) {print("ElevatedButton");}},child: const Text("普通按钮"),),TextButton(onPressed: () {if (kDebugMode) {print("TextButton");}},child: const Text("文本按钮"),),OutlinedButton(onPressed: () {if (kDebugMode) {print("OutlinedButton");}},child: const Text("带边框的按钮"),),IconButton(onPressed: () {if (kDebugMode) {print("IconButton");}},icon: const Icon(Icons.thumb_up),)],),const SizedBox(height: 10),Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [ElevatedButton.icon(onPressed: () {if (kDebugMode) {print('点击了发送按钮');}},icon: const Icon(Icons.send),label: const Text("发送"),),TextButton.icon(onPressed: () {if (kDebugMode) {print('分享');}},icon: const Icon(Icons.share),label: const Text("分享"),),OutlinedButton.icon(onPressed: () {},icon: const Icon(Icons.add),label: const Text("增加"),)],),const SizedBox(height: 10),Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [ElevatedButton(style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Colors.red), //背景颜色foregroundColor:MaterialStateProperty.all(Colors.white), //文字图标颜色),onPressed: () {if (kDebugMode) {print("ElevatedButton");}},child: const Text("普通按钮"),)],),const SizedBox(height: 10),Row(mainAxisAlignment: MainAxisAlignment.center,children: [Expanded(flex: 1,child: Container(height: 60,margin: const EdgeInsets.all(10),child: ElevatedButton(onPressed: () {},child: const Text("大按钮"),),),),Container(width: 100,height: 60,margin: const EdgeInsets.all(10),child: ElevatedButton.icon(onPressed: () {},icon: const Icon(Icons.search),label: const Text("搜索"),),)],),const SizedBox(height: 10),Row(mainAxisAlignment: MainAxisAlignment.spaceAround,children: [ElevatedButton(style: ButtonStyle(shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(20),),),),onPressed: () {},child: const Text("圆角"),),ElevatedButton(style: ButtonStyle(shape: MaterialStateProperty.all(const RoundedRectangleBorder(borderRadius: BorderRadius.only(topLeft: Radius.circular(20),bottomRight: Radius.circular(20),),),),),onPressed: () {},child: const Text("任意圆角"),),ElevatedButton(style: ButtonStyle(shape: MaterialStateProperty.all(const RoundedRectangleBorder(borderRadius: BorderRadius.vertical(top: Radius.circular(0),bottom: Radius.circular(20),),),),),onPressed: () {},child: const Text("纵横圆角"),),SizedBox(width: 60,height: 60,child: ElevatedButton(style: ButtonStyle(//按钮样式设置shape: MaterialStateProperty.all(const CircleBorder(side: BorderSide(width: 2, //边框宽度color: Colors.red, //边框颜色),),),),onPressed: () {},child: const Text("圆形"),),),],),const SizedBox(height: 10),Row(mainAxisAlignment: MainAxisAlignment.spaceAround,children: [OutlinedButton(style: ButtonStyle(side: MaterialStateProperty.all(//修改边框颜色和宽度const BorderSide(width: 2,color: Colors.red,),),),onPressed: () {},child: const Text("带边框的按钮"),)],),],);}
}

Card:卡片

 Card相当于原生中的CardView控件，用于卡片样式布局。

完整代码：

import 'package:flutter/material.dart';
import 'package:flutter_demo/res/listData.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(theme: ThemeData(primarySwatch: Colors.blue),home: Scaffold(appBar: AppBar(title: const Text("Flutter"),),body: const MyHomePage(),),);}
}class MyHomePage extends StatelessWidget {const MyHomePage({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return const LayoutDemo();}
}class LayoutDemo extends StatelessWidget {const LayoutDemo({super.key});List<Widget> _initCardData() {var tempList = listData.map((value) {//卡片控件return Card(shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)), //圆角大小elevation: 10, //阴影深度margin: const EdgeInsets.all(10),//四周间距child: Column(children: [AspectRatio(aspectRatio: 16 / 9,//屏幕比例child: Image.network(value["imageUrl"], fit: BoxFit.cover),),ListTile(//ClipOval实现圆角图片设置/*leading: ClipOval(child: Image.network(value["imageUrl"],fit: BoxFit.cover,width: 40,height: 40,),),*///CircleAvatar实现圆角图片设置leading: CircleAvatar(backgroundImage: NetworkImage(value["imageUrl"]),),title: Text(value["title"]),subtitle: Text(value["author"]),),],),);});return tempList.toList();}@overrideWidget build(BuildContext context) {return ListView(children: _initCardData(),);}
}

Card控件下的shape属性用于设置卡片样式，elevation属性用于设置卡片阴影深度。

AspectRatio控件设置图片比例。

ListView实现数据列表，相当于原生ScrollView、NestedScrollView、ListView、RecyclerView。

ListTile填充列表数据，title属性添加列表标题，subtitle为副标题，还有更多属性请查看ListTile源码。

CircleAvatar或者ClipOval控件实现圆形图片显示。

数据文件listData.dart

List listData = [{"title": "图一","author": "程序员","imageUrl": "https://www.itying.com/images/flutter/1.png",},{"title": "图二","author": "程序员","imageUrl": "https://www.itying.com/images/flutter/2.png",},{"title": "图三","author": "程序员","imageUrl": "https://www.itying.com/images/flutter/3.png",},{"title": "图四","author": "程序员","imageUrl": "https://www.itying.com/images/flutter/4.png",},{"title": "图五","author": "程序员","imageUrl": "https://www.itying.com/images/flutter/5.png",},{"title": "图六","author": "程序员","imageUrl": "https://www.itying.com/images/flutter/6.png",},
];

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

基于 R 对卫星图像进行无监督 kMeans 分类

基于 R 对卫星图像进行无监督 kMeans 分类

一、前言 本文将向您展示如何使用 R 对卫星图像执行非常基本的 kMeans 无监督分类。我们将在 Sentinel-2 图像的一小部分上执行此操作。 Sentinel-2 是由欧洲航天局发射的一颗卫星&#xff0c;其数据可在此处免费访问。 我要使用的图像显示了 Neusiedl 湖的北部&#xff08;奥地…
阅读更多...
matlab用histfit画直方图+拟合曲线

matlab用histfit画直方图+拟合曲线

matlab画直方图拟合曲线 成图效果1 数据格式2 绘制步骤3 后话 成图效果 1 数据格式 应该准备一个double的数组&#xff0c;如果是csv或者xlsx直接拖进matlab是table型&#xff0c;这是无法作为绘图参数的 如果是table型&#xff0c;可以使用table2array(data)进行转换 2 绘制…
阅读更多...
【MySQL】在Linux下删除和安装MySQL

【MySQL】在Linux下删除和安装MySQL

文章目录 一、前言二、检查、卸载内置环境三、获取mysql官方yum源四、正式安装MySQL服务五、登录MySQL配置my.cnf设置开机启动 一、前言 大家好久不见&#xff0c;今天开始分享关系型数据库Mysql的一些知识。 二、检查、卸载内置环境 2.1 首先使用命令查询当前mysql的运行状…
阅读更多...
[Qt 教程之Widgets模块] —— QFontComboBox 字体选择器

[Qt 教程之Widgets模块] —— QFontComboBox 字体选择器

Qt系列教程总目录 文章目录 3.2.1 创建 QFontComboBox3.2.2 成员函数1. 书写系统2. 字体过滤器3. 当前字体4. 信号 该控件用于选择字体&#xff0c;在一些软件中经常有类似控件&#xff0c;如下&#xff1a; Microsoft Office&#xff1a; Photoshop&#xff1a; QFontComboB…
阅读更多...
聚观早报 | 字节跳动要造机器人；苹果已开发悬空虚拟键盘

聚观早报 | 字节跳动要造机器人；苹果已开发悬空虚拟键盘

今日要闻&#xff1a;字节跳动要造机器人&#xff1b;苹果已开发悬空虚拟键盘&#xff1b;苹果汽车或售价9万美元&#xff1b;全球首例猪心脏移植患者仅存活60天&#xff1b;首款搭载ChatGPT的自行车问世 字节跳动要造机器人 7 月 3 日消息&#xff0c;「机器人」作为未来科技…
阅读更多...
【IT服务管理】MITRE :IT服务管理

【IT服务管理】MITRE :IT服务管理

定义&#xff1a; 信息技术 (IT) 服务管理 (ITSM) 是解决管理、支持和交付 IT 服务的最佳实践的框架、流程和模型的通用保护伞。IT 服务可能包括&#xff08;由 NIST 为云计算定义&#xff09;&#xff1a;软件即服务 (SaaS)、平台即服务 (PaaS) 和基础设施即服务 (IaaS)。 关键…
阅读更多...
单片机-矩阵键盘密码锁

单片机-矩阵键盘密码锁

89C52RC芯片 1.矩阵按键输入正确密码&#xff0c;LCD1602右上角显示ok&#xff0c;错误显示Err。 涉及文件&#xff1a; 1.main.c (#include<regx52.h>) 2.lcd1602.c lcd1602.h 3.Delay.c Delay.h 4.MatrixKey.c MetrixKey.h 共7项 代码 main.c #…
阅读更多...
【EasyX】使用C/C++实现 流星雨效果（配上详细注释解释）

【EasyX】使用C/C++实现 流星雨效果（配上详细注释解释）

&#x1f38a;专栏【​​​​​​​EasyX】 &#x1f354;喜欢的诗句&#xff1a;更喜岷山千里雪 三军过后尽开颜。 &#x1f386;音乐分享【Love Story】 &#x1f970;大一同学小吉&#xff0c;欢迎并且感谢大家指出我的问题&#x1f970; 文章目录 &#x1f354;效果&#x…
阅读更多...
Webots介绍

Webots介绍

Webots介绍 1 介绍1.1 概述1.2 应用1.3 入门要求1.4 技术支持1.5 仿真步骤世界&#xff08;webots定义&#xff09;控制器超级控制器 1.6 平台能力三维建模能力物理引擎外设支持 2 软件使用启动webots用户界面文件菜单编辑菜单查看菜单模拟菜单构建菜单叠加菜单工具菜单帮助菜单…
阅读更多...
机器学习洞察 | JAX，机器学习领域的“新面孔”

机器学习洞察 | JAX，机器学习领域的“新面孔”

在之前的《机器学习洞察》系列文章中&#xff0c;我们分别针对于多模态机器学习和分布式训练、无服务器推理进行了解读&#xff0c;本文将为您重点介绍 JAX 的发展并剖析其演变和动机。下面&#xff0c;就让我们来认识一下 JAX 这一新崛起的深度学习框架—— 亚马逊云科技开发…
阅读更多...
react生命周期

react生命周期

react生命周期 16.3版本之前 挂载阶段&#xff1a; constructor&#xff1a;组件的构造函数&#xff08;constuctor&#xff09;部分&#xff0c;继承React Component&#xff0c;在constructor中通过super(props)调用父类React Component的构造函数&#xff0c;才拥有了之后的…
阅读更多...
C语言程序环境和预处理

C语言程序环境和预处理

本章主要以图片和文字的形式给大家讲解 程序的翻译环境和程序的执行环境 在ANSI C的任何一种实现中&#xff0c;存在两个不同的环境。 第1种是翻译环境&#xff0c;在这个环境中源代码被转换为可执行的机器指令。 第2种是执行环境&#xff0c;它用于实际执行代码 2. 详解编译…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023