flutter 常用组件详细介绍、屏幕适配方案

一、常用组件

1.基础组件

组件说明示例
Text显示文本Text(‘Hello Flutter’, style: TextStyle(fontSize: 20))
Image显示图片Image.network(‘https://example.com/image.jpg’)
Icon显示图标Icon(Icons.home, size: 30, color: Colors.blue)
RaisedButton / ElevatedButton按钮ElevatedButton(onPressed: () {}, child: Text(‘Click’))
TextField输入框TextField(decoration: InputDecoration(labelText: ‘Name’))
1. Text：文本显示组件
  • 功能：用于显示一段文本。
  • 常用属性：
  • style：设置文本样式，如字体大小、颜色等。
  • textAlign：设置文本对齐方式。
  • maxLines：设置最大显示行数。
  • overflow：设置文本溢出处理方式，如省略号。
  • 示例
Text('Flutter 组件配置详解',style: TextStyle(fontSize: 20, color: Colors.black, fontWeight: FontWeight.bold),textAlign: TextAlign.center,maxLines: 1,overflow: TextOverflow.ellipsis,
)
属性类型说明
dataString显示的文本内容
styleTextStyle字体大小、颜色、行高等
textAlignTextAlign文本对齐（left、right、center、justify）
maxLinesint最大显示行数
overflowTextOverflow溢出处理：ellipsis（省略号）等
2. Image：图片显示组件
  • 功能：用于显示图片，支持网络图片、本地图片等。
  • 常用属性：
  • image：图片资源，如 AssetImage、NetworkImage。
  • width、height：设置图片宽高。
  • fit：设置图片的适应方式，如填充、覆盖等。
  • 示例
Image.network('https://example.com/image.jpg',width: 200,height: 100,fit: BoxFit.cover,alignment: Alignment.center,
)
属性类型说明
imageImageProvider图片数据，如 AssetImage, NetworkImage
width / heightdouble宽/高
fitBoxFit缩放方式：fill、cover、contain、fitWidth、fitHeight
repeatImageRepeat是否重复显示图片
alignmentAlignment对齐方式
3. Icon：图标组件
  • 功能：用于显示图标。
  • 常用属性：
  • icon：图标数据，如 Icons.home。
  • size：图标大小。
  • color：图标颜色。
  • 示例
    Icon(Icons.home,size: 30,color: Colors.green,
)
4. ElevatedButton：按钮组件
  • 功能：用于创建一个凸起的按钮。
  • 常用属性：
    • onPressed：按钮点击事件处理
    • child：按钮的子组件，通常是文本。
    • style：按钮样式，如背景色、形状等。
  • 示例：
	
ElevatedButton(onPressed: () => print('Clicked'),child: Text('提交'),style: ElevatedButton.styleFrom(primary: Colors.blue,onPrimary: Colors.white,padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),),)
属性类型说明
onPressedFunction()按钮点击事件
childWidget按钮内容
styleButtonStyle自定义样式：背景色、形状、边距
5.TextField：文本输入框组件
  • 功能：用于接收用户输入的文本。
  • 常用属性：
    • controller：控制器，用于获取输入内容。
    • decoration：输入框的装饰，如提示文本、边框等。
    • obscureText：是否隐藏输入内容，常用于密码输入。
  • 示例：
TextField(controller: _usernameController,obscureText: false,keyboardType: TextInputType.text,maxLength: 20,decoration: InputDecoration(labelText: '用户名',hintText: '请输入用户名',prefixIcon: Icon(Icons.person),border: OutlineInputBorder(),),onChanged: (value) {print('输入内容：$value');},
)
属性类型说明
controllerTextEditingController控制器（获取/设置输入值）
decorationInputDecoration输入框装饰
obscureTextbool是否隐藏内容（密码输入）
keyboardTypeTextInputType键盘类型：text、number、email 等
maxLengthint最大输入长度
onChanged(value) => void内容改变时的回调

2.布局组件

组件说明示例
Row / Column横/纵向布局Row(children: [Text(‘A’), Text(‘B’)])
Container容器，可设大小、颜色、边距等Container(width: 100, height: 100, color: Colors.red)
Padding添加内边距Padding(padding: EdgeInsets.all(8), child: Text(‘Padded’))
Expanded撑满剩余空间Expanded(child: Container(color: Colors.green))
Stack叠层布局Stack(children: […])
  • 其他组件
组件说明示例代码
Container常用容器组件，支持 padding、margin、decorationContainer(width: 100, margin: EdgeInsets.all(10))
Padding仅设置内边距Padding(padding: EdgeInsets.all(10), child: ...)
Align / Center对齐子组件Center(child: Text("中间"))
Row / Column横向或纵向排列子组件Row(children: [Text("A"), Text("B")])
Expanded填满剩余空间Expanded(child: Container(color: Colors.red))
SizedBox固定宽高或空隙SizedBox(height: 20)
Stack组件层叠Stack(children: [Container(), Positioned(...)])
Wrap自动换行布局Wrap(children: [...])
Spacer占位间隔Spacer(flex: 1)
1. Row 和 Column：线性布局组件
  • 功能：分别用于水平和垂直排列子组件。
  • 常用属性：
    • mainAxisAlignment：主轴对齐方式。
    • crossAxisAlignment：交叉轴对齐方式。
    • children：子组件列表。
  • 示例：
Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,crossAxisAlignment: CrossAxisAlignment.center,children: [Icon(Icons.star),Icon(Icons.star),Icon(Icons.star),],
)
属性类型说明
childrenList<Widget>子组件列表
mainAxisAlignmentMainAxisAlignment主轴对齐
crossAxisAlignmentCrossAxisAlignment交叉轴对齐
mainAxisSizeMainAxisSize主轴占用空间（max/min）
2. Container：容器组件
  • 功能：用于创建一个矩形可视区域，可设置大小、边距、边框、背景色等
  • 常用属性：
    • width、height：设置宽高。
    • padding、margin：内边距和外边距。
    • decoration：装饰，如背景色、边框等
  • 示例
	
Container(width: 200,height: 100,padding: EdgeInsets.all(10),margin: EdgeInsets.only(top: 20),alignment: Alignment.center,decoration: BoxDecoration(color: Colors.amber,borderRadius: BorderRadius.circular(10),boxShadow: [BoxShadow(color: Colors.grey, blurRadius: 4)],),child: Text('我是容器'),
)
属性类型说明
width / heightdouble宽高
padding / marginEdgeInsets内/外边距
decorationBoxDecoration背景、边框、阴影、圆角等
alignmentAlignment子组件对齐方式
childWidget子组件
3. Stack 和 Positioned：堆叠布局组件
  • 功能：用于堆叠多个子组件，可以通过 Positioned 精确定位。
  • 常用属性：
    • alignment：设置子组件的对齐方式。
    • children：子组件列表
  • 示例：
Stack(children: [Container(width: 200, height: 200, color: Colors.green),Positioned(top: 20,left: 20,child: Container(width: 100, height: 100, color: Colors.red),),],
)
属性类型说明
alignmentAlignment默认子组件对齐方式
childrenList<Widget>子组件列表
fitStackFit子组件如何填充 Stack

3.功能类组件

组件说明示例代码
AppBar页面顶部导航栏AppBar(title: Text("标题"))
BottomNavigationBar底部导航栏BottomNavigationBar(items: [...])
Drawer抽屉菜单Drawer(child: ListView(...))
TabBar / TabBarView顶部选项卡配合 TabController 使用
Navigator页面跳转Navigator.push(context, MaterialPageRoute(builder: (_) => Page()))
AlertDialog弹窗对话框showDialog(context: ..., builder: (_) => AlertDialog(...))
GestureDetector手势识别GestureDetector(onTap: () { ... })
1. ListView：可滚动的列表组件
  • 功能：用于显示一个可滚动的列
  • 常用属性：
    • children：子组件列表。
    • itemBuilder：用于懒加载子组件。
    • separatorBuilder：用于添加分隔线。
  • 示例：
ListView.builder(itemCount: 10,itemBuilder: (context, index) {return ListTile(leading: Icon(Icons.person),title: Text('Person $index'),subtitle: Text('Subtitle $index'),);},
)
属性类型说明
childrenList<Widget>静态子组件列表
itemBuilderIndexedWidgetBuilder构建子项
itemCountint子项数量
scrollDirectionAxis滚动方向（horizontal, vertical）
2. GridView：网格布局组件
  • 功能：用于创建一个网格布局的可滚动列表
  • 常用属性：
    • gridDelegate：控制网格的布局方式。
    • children：子组件列表。
  • 示例：
GridView.count(crossAxisCount: 2,children: List.generate(4, (index) {return Center(child: Text('Item $index',style: Theme.of(context).textTheme.headline5,),);}),
)
属性类型说明
crossAxisCountint横轴显示个数
mainAxisSpacingdouble主轴间距
crossAxisSpacingdouble横轴间距
childAspectRatiodouble宽高比
3. Card：卡片组件
  • 功能：用于创建具有圆角和阴影的卡片效果。
  • 常用属性：
    • elevation：设置阴影的大小。
    • shape：设置卡片的形状。
    • child：卡片的子组件。
  • 示例：
Card(elevation: 5,shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10),),child: Padding(padding: EdgeInsets.all(16),child: Text('This is a card'),),
)

4. 状态管理类

  • setState()：最简单的本地状态更新方式
  • 插件方式：Provider、Riverpod、GetX、Bloc。

表单组件

组件说明示例代码
TextField输入框TextField(decoration: InputDecoration(labelText: '姓名'))
TextFormField带验证的输入框TextFormField(validator: (val) => val!.isEmpty ? '必填' : null)
Form表单容器Form(key: _formKey, child: Column(...))
Checkbox / CheckboxListTile复选框Checkbox(value: true, onChanged: ...)
Radio / RadioListTile单选框Radio(value: 1, groupValue: _val, onChanged: ...)
Switch开关Switch(value: true, onChanged: ...)
DropdownButton下拉菜单DropdownButton(items: [...], onChanged: ...)
Slider滑块Slider(value: 50, min: 0, max: 100, onChanged: ...)

5 屏幕适配方案

方案描述插件推荐
基于设计稿等比缩放将 UI 尺寸按比例缩放适配flutter_screenutil
MediaQuery 自适应读取设备尺寸并调整布局内置 MediaQuery.of(context)
LayoutBuilder 自适应按父容器的尺寸动态布局内置 LayoutBuilder(...)
响应式组件封装根据屏幕宽度切换 UIresponsive_framework、flutter_responsive

插件推荐：flutter_screenutil

dependencies:flutter_screenutil: ^5.5.3+2

使用实例

import 'package:flutter_screenutil/flutter_screenutil.dart';void main() {runApp(ScreenUtilInit(designSize: Size(375, 812), // 设计稿尺寸（例如 iPhone X）builder: (context, child) => MyApp(),),);
}class MyHomePage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: Container(width: 100.w, // 屏幕适配宽度height: 100.h, // 屏幕适配高度child: Text('Hello', style: TextStyle(fontSize: 16.sp)), // 字体大小适配),),);}
}

其他适配逻辑

插件功能适合场景
flutter_screenutil基于设计稿自动缩放推荐用于大部分项目
responsive_builder响应式断点布局多平台（Web、Mobile）适配
flutter_responsive_framework精准控制不同设备 UI企业级适配
mediaquery_sizer类似 screenutil，但更轻量轻量项目可用

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

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

相关文章

leetcode 17. Letter Combinations of a Phone Number

leetcode 17. Letter Combinations of a Phone Number

题目描述 17. Letter Combinations of a Phone Number 代码&#xff1a; class Solution {string table[10] {"","","abc","def","ghi","jkl","mno","pqrs","tuv","wxyz&qu…
阅读更多...
Web前端大模型实战：端侧翻译+朗读流程线+模型音频数据编码 - 让网站快速支持多语言多模态输出

Web前端大模型实战：端侧翻译+朗读流程线+模型音频数据编码 - 让网站快速支持多语言多模态输出

在以前的文章 前端大模型入门&#xff1a;实战篇之Vue3Antdvtransformers本地模型实现增强搜索 中介绍了前端使用大模型的文本RAG实现。本文将更进一步&#xff0c;介绍多模态输出的端侧实现。 本文将通过端侧大模型技术实现网页端的实时翻译与语音合成功能&#xff0c;无需服…
阅读更多...
Python包管理工具uv 国内源配置

Python包管理工具uv 国内源配置

macOS 下 .config/uv/uv.toml内 pip源 [[index]] url "https://mirrors.tuna.tsinghua.edu.cn/pypi/web/simple/" default true#uv python install 下载源配置无效&#xff0c;需要在项目里配置 # python-install-mirror "https://mirror.nju.edu.cn/githu…
阅读更多...
用户有一个Django模型没有设置主键，现在需要设置主键。

用户有一个Django模型没有设置主键，现在需要设置主键。

用户有一个Django模型没有设置主键&#xff0c;现在需要设置主键。 from django.db import modelsclass CategoryAssistentModel(models.Model):second_level_category models.CharField(max_length100, nullTrue, blankTrue)third_level_category models.CharField(max_len…
阅读更多...
搭建 C/C++_CMake_Boost_git 开发环境

搭建 C/C++_CMake_Boost_git 开发环境

搭建 C 开发环境 步骤 1&#xff1a;启动 Ubuntu 18.04 容器 创建并启动一个 Ubuntu 18.04 容器&#xff1a; docker run -itd --name cppubuntu ubuntu:18.04-itd&#xff1a;以交互模式运行容器&#xff0c;并在后台运行。--name cppubuntu&#xff1a;命名容器为 cppubun…
阅读更多...
OceanBase数据库全面指南（查询进阶篇DQL）

OceanBase数据库全面指南（查询进阶篇DQL）

文章目录 一、OceanBase条件查询详解——WHERE子句的艺术1.1 WHERE子句基础语法与原理1.2 基础条件查询实战1.3 高级条件表达式1.4 分布式环境下的条件查询优化二、OceanBase排序查询——ORDER BY深度解析2.1 ORDER BY基础与执行原理2.2 单字段排序实战2.3 多字段复杂排序2.4 排…
阅读更多...
.NET 10 - 尝试一下Minimal Api的Validation新特性

.NET 10 - 尝试一下Minimal Api的Validation新特性

1.简单介绍 2025年11月微软将会发布.NET10&#xff0c;这是LTS(Long Term Support)版本。当前.NET10已经处于Preview4版本&#xff0c;微软对Runtime, Library, SDK, C#, Asp.NET Core, MAUI等都做了很多enhancement。近些年微软对Minimal Api一直在持续地更新。在.NET8中, Mi…
阅读更多...
vue+threeJS 创建镂空球体（SphereGeometry）

vue+threeJS 创建镂空球体（SphereGeometry）

嗨&#xff0c;我是小路。今天主要和大家分享的主题是“vuethreeJS 创建镂空球体&#xff08;SphereGeometry&#xff09;”。 上次看到一个做镂空球体的项目&#xff0c;自己也准备尝试着做一做。今天终于做完了&#xff0c;并对这个项目进行梳理。 镂空球体示例效果…
阅读更多...
Docker 镜像打包到本地

Docker 镜像打包到本地

保存镜像 使用 docker save 命令将镜像保存为一个 tar 文件。命令格式如下&#xff1a; docker save [options] IMAGE [IMAGE...]示例&#xff1a;docker save -o centos.tar centos:latest--output 或 -o&#xff1a;将输出保存到指定的文件中。 加载镜像 如果需要在其他机器…
阅读更多...
前端常见的安全问题

前端常见的安全问题

跨站脚本攻击(XSS) XSS&#xff08;跨站脚本攻击&#xff0c;Cross-Site Scripting&#xff09;是一种通过在网页中注入恶意脚本&#xff0c;从而窃取用户数据或控制用户行为的攻击方式。注入的js跟网页与原有的js具有同样的权限&#xff0c;可以获得server端数据、可以获取co…
阅读更多...
Spring Boot与Disruptor高性能队列整合指南

Spring Boot与Disruptor高性能队列整合指南

精心整理了最新的面试资料和简历模板&#xff0c;有需要的可以自行获取 点击前往百度网盘获取 点击前往夸克网盘获取 一、Disruptor简介 Disruptor是LMAX公司开发的高性能无锁队列框架&#xff0c;其核心设计通过以下特性实现卓越性能&#xff1a; 环形数组结构&#xff08;…
阅读更多...
MongoDB CRUD操作完全指南：从入门到精通

MongoDB CRUD操作完全指南：从入门到精通

在当今数据驱动的时代&#xff0c;数据库管理系统扮演着至关重要的角色。作为最受欢迎的NoSQL数据库之一&#xff0c;MongoDB以其灵活的数据模型、卓越的可扩展性和强大的查询能力赢得了开发者的青睐。本文将全面介绍MongoDB的核心操作——CRUD&#xff08;创建、读取、更新、删…
阅读更多...
2025/5/25 学习日记 linux进阶命令学习

2025/5/25 学习日记 linux进阶命令学习

tree:以树状结构显示目录下的文件和子目录&#xff0c;方便直观查看文件系统结构。 -d&#xff1a;仅显示目录&#xff0c;不显示文件。-L [层数]&#xff1a;限制显示的目录层级&#xff08;如 -L 2 表示显示当前目录下 2 层子目录&#xff09;。-h&#xff1a;以人类可读的格…
阅读更多...
quickbi实现关联度分析（复刻PowerBI展示）

quickbi实现关联度分析（复刻PowerBI展示）

quickbi实现关联度分析&#xff08;复刻PowerBI展示&#xff09; PowerBI通过DAX创建度量值&#xff0c;可以比较轻松的实现不同产品的关联度分析&#xff0c;即购物篮分析&#xff0c;但如果使用quickbi&#xff0c;则需要通过sql代码创建一个数据集&#xff0c;然后再通过数…
阅读更多...
git 把一个分支A的某一个 commit 应用到另一个分支B上

git 把一个分支A的某一个 commit 应用到另一个分支B上

先记住分支 A 上你要应用的那个 commit <commit_id> checkout 到分支 B git cherry-pick <commit_id>完成
阅读更多...
基于Python的分布式网络爬虫系统设计与实现

基于Python的分布式网络爬虫系统设计与实现

摘要 随着互联网信息爆炸性增长&#xff0c;大规模数据采集与分析需求日益增加。本文设计并实现了一套基于Python的分布式网络爬虫系统&#xff0c;采用图形用户界面实现便捷操作&#xff0c;集成异步IO技术与多线程处理机制&#xff0c;有效解决了传统爬虫在数据获取、处理效…
阅读更多...
一文讲透golang channel 的特点、原理及使用场景

一文讲透golang channel 的特点、原理及使用场景

在 Go 语言中&#xff0c;通道&#xff08;Channel&#xff09; 是实现并发编程的核心机制之一&#xff0c;基于 CSP&#xff08;Communicating Sequential Processes&#xff09; 模型设计。它不仅用于协程&#xff08;Goroutine&#xff09;之间的数据传递&#xff0c;还通过…
阅读更多...
PID项目---硬件设计

PID项目---硬件设计

该项目是立创训练营项目&#xff0c;这些是我个人学习的记录&#xff0c;记得比较潦草 1.硬件-电路原理电赛-TI-基于MSPM0的简易PID项目_哔哩哔哩_bilibili 这个地方接地是静电的考量 这个保护二极管是为了在电源接反的时候保护电脑等设备 大电容的作用&#xff1a;当电机工作…
阅读更多...
【分库分表】理论基础

【分库分表】理论基础

目录 为什么要分库分表 垂直分 垂直分库 垂直分表 垂直切分优缺点 优点 缺点 水平分 水平分库 水平分表 水平切分优缺点 优点 缺点 为什么要分库分表 分库分表是一种场景解决方案&#xff0c;它的出现是为了解决一些场景问题的 单表过大的话&#xff0c;读请求进…
阅读更多...
UDP和TCP示例程序

UDP和TCP示例程序

查看自己的IP地址 以管理员身份运行cmd 输入 ipconfig 复制图中的IPv4地址 UDP通信程序 UdpReceiver.java import java.net.*;public class UdpReceiver {public static void main(String[] args) {// 监听端口&#xff08;需与发送端保持一致&#xff09;int listenPort…
阅读更多...
最新文章

Copyright @ 2022~2023