flutter 非常用組件整理 第二篇
視頻
https://www.bilibili.com/video/BV1jS421R7vJ/
前言
原文 https://ducafecat.com/blog/lesser-known-flutter-widgets-02
本文是Flutter非常用組件第二篇塔淤，從開發(fā)者的視角出發(fā),精選并深入剖析了AboutDialog初厚、AnimatedGrid、Badge等鮮為人知卻功能強(qiáng)大的隱藏組件,為讀者提供了一份全面的Flutter UI組件使用指南猪勇。無論您是初學(xué)者還是有經(jīng)驗(yàn)的開發(fā)者,相信本文都能為您的Flutter項(xiàng)目注入新的活力,助力打造出色的應(yīng)用界面棠枉。
Flutter,UI組件,界面設(shè)計(jì),隱藏組件,高級組件,應(yīng)用開發(fā)
參考
正文
AboutDialog
AboutDialog 組件用于顯示應(yīng)用程序的"關(guān)于"對話框浓体。它通常包含應(yīng)用程序的名稱、版本辈讶、版權(quán)信息以及其他相關(guān)細(xì)節(jié)命浴。讓我們來看一個使用 AboutDialog 的例子:
import 'package:flutter/material.dart';
class WidgetPage extends StatefulWidget {
const WidgetPage({super.key});
@override
State<WidgetPage> createState() => _WidgetPageState();
}
class _WidgetPageState extends State<WidgetPage> {
Widget _mainView() {
return Center(
child: Column(
children: [
IconButton(
icon: const Icon(Icons.info),
onPressed: () {
showAboutDialog(
context: context,
applicationName: '貓哥App',
applicationVersion: '1.0.0',
applicationIcon: Image.asset(
'assets/app_icon.png',
width: 100,
),
applicationLegalese: '? 2024 Ducafecat. All rights reserved.',
);
},
)
],
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('非常用組件'),
),
body: _mainView(),
);
}
}
點(diǎn)擊后可以查看應(yīng)用包使用詳情，還是很有用的贱除。
在這個例子中,我們創(chuàng)建了一個簡單的 Flutter 應(yīng)用程序,包含一個 AppBar 和一個居中的文本生闲。在 AppBar 的操作圖標(biāo)中,我們添加了一個 IconButton,當(dāng)點(diǎn)擊時會顯示 AboutDialog。
showAboutDialog() 函數(shù)用于顯示 AboutDialog月幌。我們?yōu)槠涮峁┝艘韵聦傩?
-
applicationName: 應(yīng)用程序的名稱 -
applicationVersion: 應(yīng)用程序的版本號 -
applicationIcon: 應(yīng)用程序的圖標(biāo) -
applicationLegalese: 應(yīng)用程序的版權(quán)信息
當(dāng)用戶點(diǎn)擊 AppBar 上的信息圖標(biāo)時,AboutDialog 將顯示應(yīng)用程序的基本信息碍讯。這種對話框通常用于向用戶提供有關(guān)應(yīng)用程序的更多詳細(xì)信息。
AboutListTile
AboutListTile 是一個 ListTile 組件的特殊版本,用于在應(yīng)用程序的設(shè)置或信息頁面上顯示應(yīng)用程序的"關(guān)于"信息扯躺。它結(jié)合了 AboutDialog 的功能,并將其集成到一個可以輕松添加到 ListView 中的 ListTile 小部件中捉兴。
下面是一個使用 AboutListTile 的例子:
import 'package:flutter/material.dart';
class WidgetPage extends StatefulWidget {
const WidgetPage({super.key});
@override
State<WidgetPage> createState() => _WidgetPageState();
}
class _WidgetPageState extends State<WidgetPage> {
Widget _mainView() {
return ListView(
children: [
AboutListTile(
icon: Image.asset(
'assets/app_icon.png',
width: 100,
),
applicationName: '貓哥App',
applicationVersion: '1.0.0',
applicationIcon: Image.asset(
'assets/app_icon.png',
width: 100,
),
applicationLegalese: '? 2024 Ducafecat. All rights reserved.',
aboutBoxChildren: const [
Text('This is a sample Flutter app.'),
SizedBox(height: 8.0),
Text('Developed by My Company.'),
],
),
ListTile(
title: const Text('Privacy Policy'),
onTap: () {
// Navigate to privacy policy page
},
),
ListTile(
title: const Text('Terms of Service'),
onTap: () {
// Navigate to terms of service page
},
),
],
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('非常用組件'),
),
body: _mainView(),
);
}
}
點(diǎn)擊后打開版本模式框
在這個例子中蝎困，我們在 SettingsPage 的 ListView 中使用了 AboutListTile 組件。與 AboutDialog 不同倍啥，AboutListTile 直接集成到 ListTile 中,可以輕松地添加到 ListView 中禾乘。
我們?yōu)?AboutListTile 提供了以下屬性:
-
icon: 應(yīng)用程序的圖標(biāo) -
applicationName: 應(yīng)用程序的名稱 -
applicationVersion: 應(yīng)用程序的版本號 -
applicationIcon: 應(yīng)用程序的圖標(biāo) (與 icon 屬性不同) -
applicationLegalese: 應(yīng)用程序的版權(quán)信息 -
aboutBoxChildren: 可以添加到 AboutDialog 中的額外 Widget
當(dāng)用戶點(diǎn)擊 AboutListTile 時，它會彈出一個 AboutDialog虽缕，其中包含應(yīng)用程序的基本信息和自定義的 aboutBoxChildren 部分始藕。
這種方式可以讓您輕松地在設(shè)置頁面或信息頁面中添加應(yīng)用程序的"關(guān)于"信息,為用戶提供更好的體驗(yàn)。
AnimatedGrid
AnimatedGrid 是 Flutter 提供的一個強(qiáng)大的組件,用于創(chuàng)建可滾動的網(wǎng)格布局,并在添加氮趋、刪除或重新排序項(xiàng)目時提供動畫效果鳄虱。它通常用于構(gòu)建動態(tài)和交互性強(qiáng)的列表或網(wǎng)格界面。
下面是一個使用 AnimatedGrid 的示例:
import 'package:flutter/material.dart';
class WidgetPage extends StatefulWidget {
const WidgetPage({super.key});
@override
State<WidgetPage> createState() => _WidgetPageState();
}
class _WidgetPageState extends State<WidgetPage> {
final GlobalKey<AnimatedGridState> _gridKey = GlobalKey();
final List<int> _items = [];
void _addItem() {
int index = _items.length;
_items.add(index);
_gridKey.currentState?.insertItem(index);
}
void _removeItem(int index) {
if (index >= 0 && index < _items.length) {
_gridKey.currentState?.removeItem(
index,
(_, animation) => _buildItem(index, animation),
);
_items.removeAt(index);
}
}
Widget _buildItem(int item, Animation<double> animation) {
return ScaleTransition(
scale: animation,
child: GestureDetector(
onDoubleTap: () => _removeItem(item),
child: Container(
margin: const EdgeInsets.all(8.0),
color: Colors.blue,
child: Center(
child: Text(
'$item',
style: Theme.of(context).textTheme.headlineMedium,
),
),
),
),
);
}
Widget _mainView() {
return AnimatedGrid(
key: _gridKey,
initialItemCount: _items.length,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 8.0,
crossAxisSpacing: 8.0,
),
itemBuilder: (context, index, animation) {
return _buildItem(_items[index], animation);
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('非常用組件'),
actions: [
IconButton(
icon: const Icon(Icons.add),
onPressed: _addItem,
),
],
),
body: _mainView(),
);
}
}
在這個例子中,我們創(chuàng)建了一個名為 AnimatedGridPage 的頁面,它使用 AnimatedGrid 組件來顯示一個動態(tài)的網(wǎng)格布局凭峡。
AnimatedGrid 組件有以下重要屬性:
-
key: 用于標(biāo)識AnimatedGrid實(shí)例,在本例中使用了GlobalKey<AnimatedGridState>類型拙已。 -
initialItemCount: 指定初始項(xiàng)目數(shù)量。 -
gridDelegate: 用于配置網(wǎng)格布局,在本例中使用了SliverGridDelegateWithFixedCrossAxisCount摧冀。 -
itemBuilder: 定義每個網(wǎng)格項(xiàng)的構(gòu)建方式,在本例中使用_buildItem方法倍踪。
在 _addItem 和 _removeItem 方法中,我們分別調(diào)用 insertItem 和 removeItem 方法來添加和刪除網(wǎng)格項(xiàng)目,同時觸發(fā)相應(yīng)的動畫效果。
_buildItem 方法返回一個 ScaleTransition 組件,它根據(jù)動畫的值來縮放每個網(wǎng)格項(xiàng),從而產(chǎn)生添加或刪除時的動畫效果索昂。
通過使用 AnimatedGrid建车，您可以在 Flutter 應(yīng)用程序中創(chuàng)建動態(tài)且富有交互性的網(wǎng)格布局,并提供平滑的動畫效果。這對于構(gòu)建像聯(lián)系人列表椒惨、圖庫等需要頻繁更新的界面非常有用缤至。
BackButton
BackButton 是一個Flutter 小部件,用于在 Flutter 應(yīng)用程序中添加返回按鈕。它通常用于在應(yīng)用程序的頂部導(dǎo)航欄或應(yīng)用程序頁面的左上角添加一個返回按鈕康谆。當(dāng)用戶點(diǎn)擊這個按鈕時,它會觸發(fā)應(yīng)用程序的導(dǎo)航堆棧進(jìn)行回退领斥。
下面是一個簡單的示例,演示如何在 Flutter 應(yīng)用程序中使用 BackButton:
import 'package:flutter/material.dart';
class BackButtonExample extends StatefulWidget {
@override
_BackButtonExampleState createState() => _BackButtonExampleState();
}
class _BackButtonExampleState extends State<BackButtonExample> {
int _currentPage = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Back Button Example'),
leading: _currentPage > 0 ? BackButton() : null,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: _navigateToNextPage,
child: Text('Go to Next Page'),
),
SizedBox(height: 16.0),
if (_currentPage > 0)
ElevatedButton(
onPressed: _navigateToPreviousPage,
child: Text('Go to Previous Page'),
),
],
),
),
);
}
void _navigateToNextPage() {
setState(() {
_currentPage++;
});
}
void _navigateToPreviousPage() {
setState(() {
_currentPage--;
});
}
}
在這個示例中:
- 我們創(chuàng)建了一個
BackButtonExample頁面,并在Scaffold的AppBar中使用了BackButton組件。 - 我們通過跟蹤
_currentPage變量來決定是否顯示返回按鈕沃暗。當(dāng)_currentPage大于 0 時,我們會顯示返回按鈕月洛。 - 當(dāng)用戶點(diǎn)擊返回按鈕時,它會觸發(fā)應(yīng)用程序的導(dǎo)航堆棧進(jìn)行回退,從而返回到上一個頁面。
- 我們還添加了兩個按鈕,分別用于導(dǎo)航到下一個頁面和上一個頁面孽锥。
通過使用 BackButton嚼黔，您可以在 Flutter 應(yīng)用程序中輕松地添加返回功能,使用戶可以方便地在應(yīng)用程序中導(dǎo)航。這有助于提高應(yīng)用程序的可用性和用戶體驗(yàn)惜辑。
需要注意的是,BackButton 會自動處理設(shè)備上的硬件返回按鈕,并在導(dǎo)航堆棧中進(jìn)行回退唬涧。這可以確保您的應(yīng)用程序在不同設(shè)備上保持一致的行為。
Badge
Badge 是 Flutter 提供的一個小部件,用于在其他小部件上添加一個小的標(biāo)記或標(biāo)識盛撑。這通常用于在應(yīng)用程序的圖標(biāo)或其他用戶界面元素上顯示未讀消息數(shù)量碎节、購物車商品數(shù)量等信息。
下面是一個簡單的示例,演示如何在 Flutter 應(yīng)用程序中使用 Badge 組件:
import 'package:flutter/material.dart';
class WidgetPage extends StatefulWidget {
const WidgetPage({super.key});
@override
State<WidgetPage> createState() => _WidgetPageState();
}
class _WidgetPageState extends State<WidgetPage> {
int _unreadCount = 0;
Widget _mainView() {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Badge(
label: Text('$_unreadCount'),
offset: const Offset(-5, 5),
child: IconButton(
icon: const Icon(
Icons.notifications,
size: 32,
),
onPressed: () {
// Handle notification button press
},
),
),
const SizedBox(height: 16.0),
ElevatedButton(
onPressed: _incrementUnreadCount,
child: const Text('Increment Unread Count'),
),
],
),
);
}
void _incrementUnreadCount() {
setState(() {
_unreadCount++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('非常用組件'),
),
body: _mainView(),
);
}
}
在這個示例中:
- 我們創(chuàng)建了一個
BadgeExample頁面,并在Center組件中放置了一個Badge和一個ElevatedButton撵彻。 -
Badge組件包裹了一個IconButton钓株。當(dāng)用戶點(diǎn)擊這個按鈕時,可以執(zhí)行一些操作,例如打開通知列表。 - 我們使用
badgeContent屬性來顯示未讀消息數(shù)量(_unreadCount)陌僵。當(dāng)未讀消息數(shù)量增加時,Badge組件會更新其外觀,以反映最新的未讀消息數(shù)量轴合。 - 我們添加了一個
ElevatedButton，當(dāng)用戶點(diǎn)擊它時,會觸發(fā)_incrementUnreadCount函數(shù),從而增加未讀消息計(jì)數(shù)碗短。
通過使用 Badge 組件,您可以在應(yīng)用程序的各種用戶界面元素上顯示小標(biāo)記或標(biāo)識,以向用戶提供重要的上下文信息受葛。這有助于提高應(yīng)用程序的可用性和用戶體驗(yàn)。
Badge 組件提供了許多自定義選項(xiàng),如自定義背景顏色偎谁、文本樣式总滩、位置等,您可以根據(jù)需要進(jìn)行調(diào)整,以匹配應(yīng)用程序的設(shè)計(jì)風(fēng)格。
CloseButton
好的,讓我為您介紹一下 Flutter 中的 CloseButton 組件巡雨。
CloseButton 是一個 Flutter 小部件,用于在應(yīng)用程序的用戶界面中添加一個關(guān)閉按鈕闰渔。它通常用于在對話框、模態(tài)頁面或其他類型的彈出窗口的頂部或角落添加一個關(guān)閉按鈕铐望。當(dāng)用戶點(diǎn)擊這個按鈕時,它會關(guān)閉當(dāng)前頁面或?qū)υ捒?并返回到應(yīng)用程序的上一個狀態(tài)冈涧。
下面是一個簡單的示例,演示如何在 Flutter 應(yīng)用程序中使用 CloseButton:
import 'package:flutter/material.dart';
class WidgetPage extends StatefulWidget {
const WidgetPage({super.key});
@override
State<WidgetPage> createState() => _WidgetPageState();
}
class _WidgetPageState extends State<WidgetPage> {
bool _showModal = false;
void _showModalBottomSheet() {
setState(() {
_showModal = true;
});
}
void _closeModal() {
setState(() {
_showModal = false;
});
}
Widget _mainView() {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: _showModalBottomSheet,
child: const Text('Show Modal'),
),
if (_showModal)
Container(
height: 300,
color: Colors.white,
child: Stack(
children: [
Positioned(
top: 8,
right: 8,
child: CloseButton(
onPressed: _closeModal,
),
),
Center(
child: Text(
'This is a modal window',
style: Theme.of(context).textTheme.headlineSmall,
),
),
],
),
),
],
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('非常用組件'),
),
body: _mainView(),
);
}
}
在這個示例中:
- 我們創(chuàng)建了一個
CloseButtonExample頁面,并在Scaffold的body中放置了一個ElevatedButton和一個可選的模態(tài)窗口。 - 當(dāng)用戶點(diǎn)擊 "Show Modal" 按鈕時,我們會設(shè)置
_showModal變量為true正蛙，從而顯示模態(tài)窗口督弓。 - 在模態(tài)窗口的右上角,我們使用了
CloseButton組件。當(dāng)用戶點(diǎn)擊這個按鈕時,它會調(diào)用_closeModal函數(shù),將_showModal變量設(shè)置為false乒验，從而關(guān)閉模態(tài)窗口愚隧。
通過使用 CloseButton，您可以在應(yīng)用程序的各種模態(tài)頁面或彈出窗口中添加一個標(biāo)準(zhǔn)的關(guān)閉按鈕锻全。這有助于提高應(yīng)用程序的一致性和可用性,讓用戶能夠輕松地關(guān)閉不需要的頁面或窗口狂塘。
CloseButton 組件提供了一些自定義選項(xiàng),如自定義圖標(biāo)和顏色,您可以根據(jù)需要進(jìn)行調(diào)整,以匹配應(yīng)用程序的設(shè)計(jì)風(fēng)格。
CustomSingleChildLayout
CustomSingleChildLayout 是一個強(qiáng)大的 Flutter 小部件,它允許您自定義單個子小部件的布局鳄厌。與其他布局小部件不同,CustomSingleChildLayout 不使用預(yù)定義的布局規(guī)則,而是提供了一個回調(diào)函數(shù),您可以在其中實(shí)現(xiàn)自己的布局邏輯睹耐。這使您可以創(chuàng)建復(fù)雜的、動態(tài)變化的用戶界面元素,并將其集成到更廣泛的應(yīng)用程序布局中部翘。
下面是一個示例,演示如何使用 CustomSingleChildLayout 來創(chuàng)建一個自定義的浮動按鈕:
import 'package:flutter/material.dart';
class FloatingButtonLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Custom Single Child Layout'),
),
body: Stack(
children: [
// Your main content goes here
Container(
color: Colors.grey[200],
child: Center(
child: Text('Scroll to see the floating button'),
),
),
CustomSingleChildLayout(
delegate: _FloatingButtonLayoutDelegate(),
child: ElevatedButton(
onPressed: () {
// Handle floating button press
},
child: Icon(Icons.add),
),
),
],
),
);
}
}
class _FloatingButtonLayoutDelegate extends SingleChildLayoutDelegate {
@override
Size getSize(BoxConstraints constraints) {
return Size(60, 60);
}
@override
Offset getPositionForChild(Size size, Size childSize) {
return Offset(size.width - childSize.width - 16, size.height - childSize.height - 16);
}
@override
bool shouldRelayout(covariant SingleChildLayoutDelegate oldDelegate) {
return false;
}
}
在這個示例中:
- 我們創(chuàng)建了一個
FloatingButtonLayout小部件,它包含了一個Scaffold和一個Stack硝训。 - 在
Stack中,我們添加了一個填充頁面的Container，并在其上放置了一個CustomSingleChildLayout新思。 -
CustomSingleChildLayout使用了一個自定義的_FloatingButtonLayoutDelegate窖梁，它實(shí)現(xiàn)了三個關(guān)鍵方法:-
getSize: 返回浮動按鈕的大小。 -
getPositionForChild: 根據(jù)頁面大小和按鈕大小計(jì)算按鈕的位置夹囚。在這個例子中,我們將它放在右下角纵刘。 -
shouldRelayout: 返回false，因?yàn)檫@個布局不需要重新計(jì)算荸哟。
-
- 最后,我們在
CustomSingleChildLayout中放置了一個ElevatedButton假哎，作為浮動按鈕瞬捕。
通過使用 CustomSingleChildLayout，您可以創(chuàng)建各種自定義的布局效果,如浮動按鈕舵抹、懸浮菜單肪虎、自定義對話框等。這為您提供了更大的靈活性和控制權(quán),以滿足應(yīng)用程序的特定需求惧蛹。
CustomSingleChildLayout 的主要優(yōu)點(diǎn)是它允許您完全控制子小部件的布局,而不受其他布局小部件的約束扇救。但同時也需要您編寫更多的自定義代碼來實(shí)現(xiàn)所需的布局邏輯。
Directionality
Directionality 是一個非常有用的 Flutter 小部件,它可以幫助您管理應(yīng)用程序中的文本方向香嗓。在某些情況下,您的應(yīng)用程序可能需要支持從右到左(RTL)或從左到右(LTR)的文本方向,這取決于用戶的語言和區(qū)域設(shè)置迅腔。
Directionality 組件可以為其子小部件提供文本方向信息,從而使它們能夠正確地呈現(xiàn)和布局內(nèi)容靠娱。這對于支持國際化和本地化非常重要,因?yàn)椴煌恼Z言可能需要不同的文本方向沧烈。
下面是一個示例,展示如何使用 Directionality 來創(chuàng)建一個簡單的 RTL 和 LTR 切換器:
import 'package:flutter/material.dart';
class WidgetPage extends StatefulWidget {
const WidgetPage({super.key});
@override
State<WidgetPage> createState() => _WidgetPageState();
}
class _WidgetPageState extends State<WidgetPage> {
TextDirection _textDirection = TextDirection.ltr;
Widget _mainView() {
return Directionality(
textDirection: _textDirection,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text('This is some text.'),
const SizedBox(height: 16.0),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
setState(() {
_textDirection = TextDirection.ltr;
});
},
child: const Text('Left to Right'),
),
const SizedBox(width: 16.0),
ElevatedButton(
onPressed: () {
setState(() {
_textDirection = TextDirection.rtl;
});
},
child: const Text('Right to Left'),
),
],
),
],
),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('非常用組件'),
),
body: _mainView(),
);
}
}
在這個示例中:
- 我們創(chuàng)建了一個
MyApp小部件,它包含了一個Scaffold。 - 在
Scaffold的body中,我們使用了一個Directionality小部件。 -
Directionality的textDirection屬性設(shè)置為_textDirection柬泽，這是一個TextDirection類型的狀態(tài)變量。 - 在
Directionality的子小部件中,我們放置了一個Text小部件和兩個切換按鈕嫁蛇。 - 當(dāng)用戶點(diǎn)擊"Left to Right"或"Right to Left"按鈕時,我們會更新
_textDirection狀態(tài)變量的值,從而改變文本方向锨并。
通過使用 Directionality，您可以確保您的應(yīng)用程序中的文本和布局正確地適應(yīng)用戶的語言和區(qū)域設(shè)置睬棚。這對于提高應(yīng)用程序的可訪問性和國際化非常重要第煮。
Directionality 組件還可以嵌套使用,以便為應(yīng)用程序的特定部分設(shè)置不同的文本方向。這使您可以在同一個應(yīng)用程序中混合使用 RTL 和 LTR 文本,并確保它們都能正確顯示抑党。
EditableText
好的,讓我為您介紹一下 Flutter 中的 EditableText 組件包警。
EditableText 是 Flutter 框架提供的一個強(qiáng)大的小部件,用于創(chuàng)建可編輯的文本輸入框。它提供了許多有用的功能,如光標(biāo)控制底靠、選擇和剪切/復(fù)制/粘貼操作害晦。
下面是一個示例,展示如何使用 EditableText 來創(chuàng)建一個簡單的文本編輯器:
import 'dart:ui';
import 'package:flutter/material.dart';
class WidgetPage extends StatefulWidget {
const WidgetPage({super.key});
@override
State<WidgetPage> createState() => _WidgetPageState();
}
class _WidgetPageState extends State<WidgetPage> {
final TextEditingController _controller = TextEditingController();
@override
void dispose() {
_controller.dispose();
super.dispose();
}
Widget _mainView() {
return Padding(
padding: const EdgeInsets.all(16.0),
child: EditableText(
controller: _controller,
focusNode: FocusNode(),
style: const TextStyle(
fontSize: 18,
color: Colors.black,
),
cursorColor: Colors.blue,
backgroundCursorColor: Colors.yellow,
onChanged: (text) {
// Handle text changes
print('Text changed: $text');
},
onSubmitted: (text) {
// Handle text submission
print('Text submitted: $text');
},
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('非常用組件'),
),
body: _mainView(),
);
}
}
在這個示例中:
- 我們創(chuàng)建了一個
MyApp小部件,它包含了一個Scaffold。 - 在
Scaffold的body中,我們使用了一個EditableText小部件暑中。 -
EditableText的controller屬性用于管理文本內(nèi)容壹瘟。在這個例子中,我們創(chuàng)建了一個TextEditingController實(shí)例并將其傳遞給EditableText鲫剿。 -
focusNode屬性用于管理文本輸入框的焦點(diǎn)狀態(tài)。在這個例子中,我們創(chuàng)建了一個新的FocusNode實(shí)例稻轨。 -
style屬性用于設(shè)置文本的樣式,例如字體大小和顏色灵莲。 -
cursorColor和backgroundCursorColor屬性用于設(shè)置光標(biāo)的顏色。 -
onChanged和onSubmitted回調(diào)函數(shù)用于在文本發(fā)生變化或提交時執(zhí)行自定義操作澄者。
當(dāng)用戶與 EditableText 交互時,如輸入、選擇请琳、剪切/復(fù)制/粘貼等操作,EditableText 會自動處理這些事件并更新文本內(nèi)容粱挡。您可以通過 controller 屬性訪問和操作文本內(nèi)容,并使用各種回調(diào)函數(shù)來監(jiān)聽和響應(yīng)用戶的輸入。
EditableText 還提供了許多其他屬性,如 obscureText(用于實(shí)現(xiàn)密碼輸入框)俄精、maxLines 和 maxLength(用于控制輸入長度)等询筏。這些屬性可以根據(jù)您的具體需求進(jìn)行配置。
小結(jié)
本文從Flutter框架的視角,精選并介紹了幾款鮮為人知卻功能強(qiáng)大的UI組件,幫助開發(fā)者打造更優(yōu)質(zhì)的應(yīng)用界面竖慧。包括AboutDialog嫌套、AnimatedGrid、Badge等隱藏寶藏,為您的Flutter項(xiàng)目注入新活力圾旨。
感謝閱讀本文
如果有什么建議踱讨，請?jiān)谠u論中讓我知道。我很樂意改進(jìn)砍的。
flutter 學(xué)習(xí)路徑
- Flutter 優(yōu)秀插件推薦 https://flutter.ducafecat.com
- Flutter 基礎(chǔ)篇1 - Dart 語言學(xué)習(xí) https://ducafecat.com/course/dart-learn
- Flutter 基礎(chǔ)篇2 - 快速上手 https://ducafecat.com/course/flutter-quickstart-learn
- Flutter 實(shí)戰(zhàn)1 - Getx Woo 電商APP https://ducafecat.com/course/flutter-woo
- Flutter 實(shí)戰(zhàn)2 - 上架指南 Apple Store痹筛、Google Play https://ducafecat.com/course/flutter-upload-apple-google
- Flutter 基礎(chǔ)篇3 - 仿微信朋友圈 https://ducafecat.com/course/flutter-wechat
- Flutter 實(shí)戰(zhàn)3 - 騰訊即時通訊 第一篇 https://ducafecat.com/course/flutter-tim
- Flutter 實(shí)戰(zhàn)4 - 騰訊即時通訊 第二篇 https://ducafecat.com/course/flutter-tim-s2
? 貓哥
ducafecat.com
end
