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.pswp.cn/news/906948.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/906948.shtml
英文地址，請注明出處：http://en.pswp.cn/news/906948.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋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