ui_tableview 0.0.5

一个保存了 iOS - UITableView 代码风格的滚动视图，可以用来替代 ListView，简单，易用，便于拓展的 Package。后续更新会逐步增加 iOS 更多相关 api。

ui_tableview

一个保留了 iOS 相关命名习惯的 flutter 库。

Getting Started

Add the package to your pubspec.yaml:

ui_tableview: ^0.0.5

In your dart file, import the library:

import 'package:ui_tableview/ui_tableview.dart';

Instead of using a ListView create a UITableView Widget:

const List _sections = ['星标', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',];

  UITableView _contacts(){
   int _numberOfRowsInSection(context, index){
     return 4;
   }

   int _numberOfSections(context){
     return _sections.length;
   }

   Widget _itemForRowAtIndexPath(context, indexPath){
     return Row(
       children: [
         Padding(padding: EdgeInsets.only(left: 20)),
         Icon(Icons.account_circle),
         Padding(padding: EdgeInsets.only(left: 15)),
         Text("indexPath section = ${indexPath.section}, row = ${indexPath.row}")
       ],
     );
   }

   Widget _widgetForHeaderInSection(context, section){
     return Container(
       alignment: Alignment.centerLeft,
       color: Color.fromRGBO(220, 220, 220, 1),
       padding: EdgeInsets.only(left: 20),
       child: Text("${_sections[section]}"),
     );
   }

   return UITableView(
     numberOfRowsInSection: _numberOfRowsInSection,
     numberOfSections: _numberOfSections,
     itemForRowAtIndexPath: _itemForRowAtIndexPath,
     widgetForHeaderInSection: _widgetForHeaderInSection,
   );
 }

上方代码示例：

const List _sections = ['星标', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',];

UITableView _contactsForApp(){
   int _numberOfRowsInSection(context, index){
     return 4;
   }

   int _numberOfSections(context){
     return _sections.length + 1;
   }

   Widget _itemForRowAtIndexPath(context, UIIndexPath indexPath){
     String text;

     if (indexPath.section == 0) {
       if (indexPath.row == 0) {
         text = '新的朋友';
       } else if (indexPath.row == 1) {
         text = '群聊';
       } else if (indexPath.row == 2) {
         text = '周边的人';
       } else if (indexPath.row == 3) {
         text = '视频会议';
       }
     } else {
       text = "小小  ${_sections[indexPath.section - 1]} - ${indexPath.row}";
     }

     return Stack(
       children: [
         Container(color: Colors.white,),
         Row(
           children: [
             Padding(padding: EdgeInsets.only(left: 20)),
             Image.network('https://gss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/tb.1.2c0e048.VFUJtjrbQl4EwWKNr0H0GA?t=1497799370'),
             Padding(padding: EdgeInsets.only(left: 10)),
             Text( text, style: TextStyle( fontSize: 18, ), )
           ],
         ),
         Positioned(child: Divider(height: 2,),bottom: 0, left: 15,right: 0,),
       ],
     );
   }

   Widget _widgetForHeaderInSection(context, section){
     if (section == 0) return Container();

     return Container(
       alignment: Alignment.centerLeft,
       color: Color.fromRGBO(234, 234, 234, 1),
       padding: EdgeInsets.only(left: 20),
       child: Text("${_sections[section - 1]}"),
     );
   }

   Widget _widgetForHoverHeader(context, section){
     if (section == 0) return Container();

     return Container(
       alignment: Alignment.centerLeft,
       color: Color.fromRGBO(234, 234, 234, 1),
       padding: EdgeInsets.only(left: 20),
       child: Text("${_sections[section - 1]}", style: TextStyle(color: Colors.green),),
     );
   }

   double _heightForHeaderInSection(context, section){
     if (section == 0) return 0;
     return 30;
   }

   return UITableView(
     numberOfRowsInSection: _numberOfRowsInSection,
     numberOfSections: _numberOfSections,
     itemForRowAtIndexPath: _itemForRowAtIndexPath,
     widgetForHeaderInSection: _widgetForHeaderInSection,

     heightForHeaderInSection: _heightForHeaderInSection,
     widgetForHoverHeader: _widgetForHoverHeader,
   );
 }

上方代码示例：

Parameters:

Name	Description	Required	Default value
numberOfSections	final int Function(BuildContext context) numberOfSections 外部返回几组	-	-
numberOfRowsInSection	int Function(BuildContext context, int section) numberOfRowsInSection 外部返回每组生成几行item	required	-
widgetForHeaderInSection	Widget Function(BuildContext context, int section) widgetForHeaderInSection 外部返回每组对应的 Header	-	-
itemForRowAtIndexPath	Widget Function(BuildContext context, UIIndexPath indexPath) itemForRowAtIndexPath 外部返回对应IndexPath(section, row)的 widget	required	-
heightForRowAtIndexPath	double Function(BuildContext context, UIIndexPath indexPath) heightForRowAtIndexPath 外部返回对应IndexPath(section, row)的 widget 的行高	-	默认 44
heightForHeaderInSection	double Function(BuildContext context, int section) heightForHeaderInSection 外部返回对应 section 的 Header 高度	-	默认 30
needHover	上方是否需要悬停条	-	默认为 true
widgetForHoverHeader	Widget Function(BuildContext context, int section) widgetForHoverHeader 外部返回当前 section 对应的悬停条，可根据section自定义不同样式。当 widgetForHoverHeader == null时，会执行 widgetForHeaderInSection 回调来获取悬停条	-	-
heightForHoverHeaderInSection	double Function(BuildContext context, int section) heightForHoverHeaderInSection 外部返回当前section对应的悬停条高度。当 heightForHoverHeaderInSection == null 时，执行 heightForHeaderInSection 来获取高度	-	默认 30
scrollViewDidScroll	double Function(double offset) scrollViewDidScroll，设置 scrollViewDidScroll 后，当页面滚动时，这里会返回对应 offset	-	-
tableViewDidChangeSection	int Function(int section) tableViewDidChangeSection 处于最上方的section发生改变时回调	-	-
contentOffset	设置初始偏移量	-	-