7月安卓手機(jī)性能榜：紅魔8S Pro再奪榜首
7月份的手機(jī)市場風(fēng)平浪靜，除了紅魔和努比亞帶來了兩款搭載驍龍8Gen2領(lǐng)先版處理器的新機(jī)之外，別的也想不到有什么新品了，這也正常，通常6月7月都是手機(jī)廠商修整的時(shí)間，進(jìn)入8月份之
表格是在應(yīng)用程序中高效組織數(shù)據(jù)的有用工具。Flutter 的最新更新引入了 TwoDimensionalScrollView 小部件。
TwoDimensionalScrollView 是一個(gè)小部件，它結(jié)合了 TwoDimensionalScrollable 和 TwoDimensionalViewport 在垂直和水平維度上創(chuàng)建內(nèi)容的交互式滾動(dòng)窗格，但直接使用它有點(diǎn)具有挑戰(zhàn)性。
下面是在 Flutter 中實(shí)現(xiàn) 2D ScrollView 的演示代碼。
Flutter 的預(yù)構(gòu)建 widget 具有出色的性能，僅當(dāng)子視圖位于視圖中時(shí)才延遲渲染子視圖，從而提高了性能，但 Flutter 發(fā)布了一個(gè)新包 two_dimensional_scrollables 來實(shí)現(xiàn)在垂直軸和水平軸上滾動(dòng)的 TableView。
在本教程中，我們將探索這個(gè)包來實(shí)現(xiàn)一個(gè)非常簡單的 Tableview，并了解如何自定義它。
您可以在這里[1]找到完整的源代碼。
要添加依賴項(xiàng)，請(qǐng)首先打開 pubspec.yaml 文件，然后添加依賴項(xiàng)。
dependencies: two_dimensional_scrollables: <latest version>添加 TableView 時(shí)，可以使用兩個(gè)構(gòu)造函數(shù)：
讓我們創(chuàng)建一個(gè)簡單的 Tableview 來顯示以下信息。
class Employee { final String id; final String name; final String role; final String email; Employee({ required this.id, required this.name, required this.role, required this.email}); static get getEmployees{ return [ Employee(id: '1', name: 'John Doe', role: 'Manager', email: 'john@example.com'), Employee(id: '2', name: 'Jane Smith', role: 'Developer', email: 'jane@example.com'), Employee(id: '3', name: 'Mike Johnson', role: 'Designer', email: 'mike@example.com'), Employee(id: '4', name: 'Emily Brown', role: 'HR Specialist',email: 'emily@example.com'), Employee(id: '5', name: 'Alex Lee', role: 'Marketing Analyst', email: 'alex@example.com'), Employee(id: '6', name: 'John Doe', role: 'Manager', email: 'john@example.com'), Employee(id: '7', name: 'Jane Smith', role: 'Developer', email: 'jane@example.com'), Employee(id: '8', name: 'Mike Johnson', role: 'Designer', email: 'mike@example.com'), Employee(id: '9', name: 'Emily Brown', role: 'HR Specialist',email: 'emily@example.com'), Employee(id: '10', name: 'Alex Lee', role: 'Marketing Analyst', email: 'alex@example.com'), ]; }}這是 TableView.builder 的基本示例代碼。
class TwoDimensionalScrollableDemo extends StatelessWidget { TwoDimensionalScrollableDemo({super.key});final List<Employee> employees = Employee.getEmployees; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text("Table view Demo"), ), body: TableView.builder( columnCount: 2, rowCount: 11, columnBuilder: buildTableSpan, rowBuilder: buildTableSpan, cellBuilder: (BuildContext context, TableVicinity vicinity) { return Container(child: Center(child: addText(vicinity))); }), ); } TableSpan buildTableSpan(int index){ return TableSpan(extent: FixedTableSpanExtent(50)); } Widget addText(TableVicinity vicinity) { if (vicinity.yIndex == 0 && vicinity.xIndex == 0) { return const Text("Index"); } else if (vicinity.yIndex == 0 && vicinity.xIndex == 1) { return const Text("name"); } else if (vicinity.xIndex == 0) { return Text(employees[vicinity.yIndex-1].id); } else if (vicinity.xIndex == 1) { return Text(employees[vicinity.yIndex-1].name); } return Text(""); }}這對(duì)于幾行代碼來說已經(jīng)相當(dāng)不錯(cuò)了，讓我們分解一下 TableView.builder 所需的參數(shù)。
運(yùn)行上面的代碼，您將看到以下輸出。
圖片
現(xiàn)在，讓我們研究一下 TableView.builder 提供的功能！那么，讓我們看看如何自定義和控制 TableView 并添加更多功能。
TableSpan 表示 TableView 中的一行或一列。
TableSpan buildTableSpan(int index) { TableSpanDecoration decoration = const TableSpanDecoration( border: TableSpanBorder( trailing: BorderSide(color: Colors.black), leading: BorderSide(color: Colors.black))); return TableSpan( extent: const FixedTableSpanExtent(100), foregroundDecoration: decoration);}TableSpanDecoration 類用于指定 TableSpan 的裝飾。我們可以通過 TableSpanBorder 類中的 border 參數(shù)為 TableSpan 添加邊框，該類具有代表行左右邊框和列上下邊框的拖尾和前導(dǎo)屬性。
TableSpan buildTableSpan(int index) { TableSpanDecoration decoration = TableSpanDecoration( color: index == 0 ? Colors.grey[300] : null, border: const TableSpanBorder( trailing: BorderSide(color: Colors.black), leading: BorderSide(color: Colors.black))); return TableSpan( extent: const FixedTableSpanExtent(100), backgroundDecoration: decoration);}TableSpanDecoration 中的 color 屬性用于設(shè)置 TableSpan 的顏色。
運(yùn)行代碼，輸出將如下所示
圖片
因?yàn)?span style="display:none">PaA28資訊網(wǎng)——每日最新資訊28at.com
這里默認(rèn)的軸是 Axis.vertical ，所以，先繪制列，然后繪制行，邊框與行裝飾重疊，所以，讓我們?yōu)榍熬把b飾添加邊框。
TableSpan buildTableSpan(int index) { TableSpanDecoration foreGroundDecoration = const TableSpanDecoration( border: TableSpanBorder( trailing: BorderSide(color: Colors.black), leading: BorderSide(color: Colors.black))); TableSpanDecoration backGroundDecoration = TableSpanDecoration( color: index == 0 ? Colors.grey[300] : null, ); return TableSpan( extent: const FixedTableSpanExtent(100), backgroundDecoration: backGroundDecoration, foregroundDecoration: foreGroundDecoration);}在前景裝飾中添加邊框可確保其呈現(xiàn)在 TableView 中單元格內(nèi)容的頂部。
圖片
它表示行的高度和列的寬度，TableSpanExtent 有四種類型。
具有固定[像素]的跨度。
extent: const FixedTableSpanExtent(50),
圖片
它將跨度范圍指定為視口范圍的一部分。它與 Expanded 小部件相同，根據(jù)提供的分?jǐn)?shù)占用空間。
extent: const FractionalTableSpanExtent(0.5),
圖片
它指定跨度應(yīng)占據(jù)視口中的剩余空間。
TableSpan buildColumnSpan(int index) { TableSpanDecoration decoration = const TableSpanDecoration( border: TableSpanBorder( trailing: BorderSide(color: Colors.black), leading: BorderSide(color: Colors.black))); return TableSpan( extent: index==0? FixedTableSpanExtent(100):RemainingTableSpanExtent(), backgroundDecoration: decoration);}
圖片
它以兩個(gè)范圍作為參數(shù)，并通過組合器函數(shù)運(yùn)行這兩個(gè)范圍的結(jié)果。
TableSpan buildRowSpan(int index) { TableSpanExtent extent1 = FixedTableSpanExtent(100); TableSpanExtent extent2 = FixedTableSpanExtent(100); double combiner(double value1, double value2) { return value1 + value2; } TableSpanDecoration foreGroundDecoration = const TableSpanDecoration( border: TableSpanBorder( trailing: BorderSide(color: Colors.black), leading: BorderSide(color: Colors.black))); TableSpanDecoration backGroundDecoration = TableSpanDecoration( color: index == 0 ? Colors.grey[300] : null, ); if (index == 1) { return TableSpan( extent: CombiningTableSpanExtent(extent1, extent2, combiner), backgroundDecoration: backGroundDecoration, foregroundDecoration: foreGroundDecoration); } return TableSpan( extent: const FixedTableSpanExtent(100), backgroundDecoration: backGroundDecoration, foregroundDecoration: foreGroundDecoration); }
圖片
當(dāng)鼠標(biāo)指針（按下或不按下按鈕）進(jìn)入此跨度描述的行或列時(shí)觸發(fā)。
void Function(PointerEnterEvent)? onEnter當(dāng)鼠標(biāo)指針（按下或未按下按鈕）退出此跨度描述的行或列時(shí)，它會(huì)觸發(fā)。
void Function(PointerExitEvent)? onExitrecognizerFactories: <Type, GestureRecognizerFactory>{ TapGestureRecognizer: GestureRecognizerFactoryWithHandlers<TapGestureRecognizer>( () => TapGestureRecognizer(), (TapGestureRecognizer t) { t.notallow=(TapDownDetails tapdownDetails){ print(tapdownDetails.localPosition); }; t.notallow=(TapUpDetails tapupDetails){ print(tapupDetails.localPosition); }; } ),},recognizerFactories 是一個(gè)映射，其中鍵是手勢類型，值是 GestureRecognizerFactory 的實(shí)例。
GestureRecognizerFactoryWithHandlers 有兩個(gè)參數(shù)。調(diào)用時(shí)返回 TapGestureRecognizer 實(shí)例的函數(shù)和初始化 TapGestureRecognizer 并設(shè)置事件處理程序以處理特定事件詳細(xì)信息的回調(diào)函數(shù)。
padding 屬性用于為每行和每列添加填充。
padding: TableSpanPadding(leading: 10),讓我們?cè)?TableView 中顯示來自 Employee 類的更多數(shù)據(jù)，例如 email 和 role 。
Widget addText(TableVicinity vicinity) { if (vicinity.yIndex == 0 && vicinity.xIndex == 0) { return const Text("Index"); } else if (vicinity.yIndex == 0 && vicinity.xIndex == 1) { return const Text("name"); } else if (vicinity.yIndex == 0 && vicinity.xIndex == 2) { return const Text("Email"); } else if (vicinity.yIndex == 0 && vicinity.xIndex == 3) { return const Text("Role"); } else if (vicinity.xIndex == 0) { return Text(employees[vicinity.yIndex - 1].id); } else if (vicinity.xIndex == 1) { return Text(employees[vicinity.yIndex - 1].name); } else if (vicinity.xIndex == 2) { return Text(employees[vicinity.yIndex - 1].email); } else if (vicinity.xIndex == 3) { return Text(employees[vicinity.yIndex - 1].role); } return Text(""); }... body: TableView.builder( mainAxis: Axis.horizontal, columnCount: 4, rowCount: 21, columnBuilder: buildColumnSpan, rowBuilder: buildTableSpan, cellBuilder: (BuildContext context, TableVicinity vicinity) { return Center(child: addText(vicinity)); }),...TableSpan buildColumnSpan(int index) { TableSpanDecoration decoration = const TableSpanDecoration( border: TableSpanBorder( trailing: BorderSide(color: Colors.black), leading: BorderSide(color: Colors.black))); if (index == 2) { return TableSpan( extent: const RemainingTableSpanExtent(), backgroundDecoration: decoration, ); } else if (index == 3) { return TableSpan( extent: const FractionalTableSpanExtent(0.5), backgroundDecoration: decoration, ); } return TableSpan( extent: FixedTableSpanExtent(100), backgroundDecoration: decoration);}輸出是：
圖片
固定持續(xù)出現(xiàn)在 TableView 視口邊緣的特定數(shù)量的行和列。
TableView.builder(... pinnedRowCount: 1, pinnedColumnCount: 1, ),
圖片
ScrollableDetail 允許對(duì)小部件的垂直和水平滾動(dòng)行為進(jìn)行特定配置。
verticalDetails: ScrollableDetails.vertical( reverse: true, controller: verticalController, physics: const AlwaysScrollableScrollPhysics(), decorationClipBehavior: Clip.hardEdge),ScrollableDetails 中的 verticalDetails 允許對(duì)小部件的垂直滾動(dòng)行為進(jìn)行特定配置，它封裝了各種屬性。
verticalDetails: ScrollableDetails.vertical( reverse: true, controller: verticalController, physics: const AlwaysScrollableScrollPhysics(), decorationClipBehavior: Clip.hardEdge,)以下是屬性的詳細(xì)說明：
cacheExtent: 200,與ListView類似， cacheExtent 是在進(jìn)入屏幕可見部分之前繪制的區(qū)域的大小。
該枚舉允許開發(fā)人員指定如何使用 kTouchSlop 處理對(duì)角滾動(dòng)。
在本教程中，我們學(xué)習(xí)了如何使用 Flutter 中的 two_dimensional_scrollable 實(shí)現(xiàn) Flutter 中的 tableView，我們可以用它做更多的事情并使用它添加更多功能。這是我對(duì) Flutter 中 TableView 的一個(gè)小介紹。
翻譯自：https://blog.canopas.com/how-to-implement-2d-scrollable-tableview-in-flutter-a8b0fe703614圖片
[1]這里: https://gist.github.com/cp-sneha-s/d2375b2a624f5650fa3836a84805b15f
本文鏈接：http://www.tebozhan.com/showinfo-26-100463-0.html如何在 Flutter 中實(shí)現(xiàn) 2D 可滾動(dòng)的表格，探索 Flutter 中的二維可滾動(dòng)項(xiàng)，表格解決方案
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)