idkit_tableview 0.0.1 copy "idkit_tableview: ^0.0.1" to clipboard
idkit_tableview: ^0.0.1 copied to clipboard

This component is an extension of the partial update of the single list and grouped list views. Functions:\1. Support for the update of a certain view. 2. Support for the update of a certain module vi [...]

idkit_tableview #

1.Introduction #

This component supports two kinds of list display, namely single list and grouped list. It supports the view update of a specified element in the list and the view update of a specified group and the view update of the entire list. It does not support the movement and deletion of element views in the table.

2. Two types of lists #

enum TableViewStyle {
  plain, // regular table view
  group, // sections are grouped together
}

The default is a regular list.

3.The control update object of the table view #

1. Class Name: IDKitUpdateControl
2. Class definition
class IDKitUpdateControl {
  /// Factory method to initialize the object.
  factory IDKitUpdateControl() => IDKitUpdateControl._();

  /// Basic initial construction method.
  IDKitUpdateControl._() {
    _updateStreamController = StreamController<IDKitUpdateType>();
  }

  /// Event forwarding subscribers are generated by default.
  StreamController<IDKitUpdateType>? _updateStreamController;
  StreamController<IDKitUpdateType>? get updateStreamController {
    _updateStreamController =
        _updateStreamController ?? IDKitUpdateControl().updateStreamController;
    return _updateStreamController;
  }
  ...... // 省略代码
}
3. Update method
  /// Update the head view of the tableview.
  void updateHeaderTableView()

  /// Update the bottom view of the tableview.
  void updateFotterTableView()

  /// Update the head view of section.
  void updateHeaderSection(int section)

  /// Update the bottom view of section.
  void updateFotterSection(int section)

  /// Update the view of a row in section.
  void updateRowInSection(IDKitIndexPath indexPath)

  /// Update the separate view of section.
  void updateSeparateInSection(int section)

  /// Update all views in a section.
  void updateRowsInSection(int section)

  /// All table views are updated.
  void updateTableView()

4. Introduction to some functions of this component #

// Set the head view of the table view
1. headerInTableView: (Widget view) -> Widget

// Set the fotter view of the table view
2. footerInTableView: (Widget view) -> Widget

// Set the head view of a group of table views
3. headerInSection: (_, int section) -> Widget

// Set the fotter view of a group of table views
4. footerInSection: (_, int section) -> Widget

// The number of groups in the table view
5. numberOfSection: (_) -> Int

// The number of all elements in each group in the table view
6. numberOfRowInSection: (_, int section) -> Int

// The construction of each group of views containing all elements in the table view
7. itemForRowAtIndexPath: (_, IDKitIndexPath indexPath) -> Widget

// Split view between each group of views in the table view
8. separateInSection: (_, int section) -> Widget

5. Component example demonstration #

1. Single group list instance
/// Single table view
class SingleTableView extends StatefulWidget {
  const SingleTableView({Key? key}) : super(key: key);

  @override
  _SingleTableViewState createState() => _SingleTableViewState();
}

class _SingleTableViewState extends State<SingleTableView> {
  final List<int> list = List<int>.generate(10, (int index) => 0);
  final IDKitUpdateControl updateControl = IDKitUpdateControl();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Single List'),
      ),
      body: Container(
        alignment: Alignment.center,
        child: IDKitTableView(
          updateControl: updateControl,
          itemForRowAtIndexPath: (_, IDKitIndexPath indexPath) {
            return Container(
              height: 60,
              alignment: Alignment.center,
              color: Colors.red,
              child: Row(
                children: <Widget>[
                  const Icon(Icons.ac_unit_outlined),
                  GestureDetector(
                    onTap: () {
                      list[indexPath.row] += 1;
                      updateControl.updateRowInSection(indexPath);
                    },
                    child: Text('item -- ${indexPath.row}'),
                  ),
                  const Spacer(),
                  Text(list[indexPath.row].toString()),
                ],
              ),
            );
          },
          numberOfRowInSection: (_, __) {
            return list.length;
          },
        ),
      ),
    );
  }
}
2. Multi-group list instance
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final Map<String, String> map = <String, String>{
    'Num': '110',
    'Count': '220'
  };
  List<int> list = <int>[1, 2, 3, 4, 5, 6];
  final IDKitUpdateControl _updateTableView = IDKitUpdateControl();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Multiple List'),
      ),
      body: Container(
        alignment: Alignment.center,
        child: IDKitTableView(
          style: TableViewStyle.group,
          updateControl: _updateTableView,
          headerInTableView: (Widget view) {
            return Container(
              height: 100,
              color: Colors.pink,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  GestureDetector(
                    child: Container(
                      padding: const EdgeInsets.all(5),
                      decoration: BoxDecoration(
                        border: Border.all(),
                      ),
                      child: Text(' Single update-${map['Num']}'),
                    ),
                    onTap: () {
                      map['Num'] = '330';
                      _updateTableView.updateHeaderTableView();
                    },
                  ),
                  GestureDetector(
                    child: Container(
                      padding: const EdgeInsets.all(5),
                      decoration: BoxDecoration(
                        border: Border.all(),
                      ),
                      child: Text('Multiple updates-${map['Num']}'),
                    ),
                    onTap: () {
                      map['Num'] = '430';
                      list = list.map((int e) => e * 10).toList();
                      _updateTableView.updateRowsInSection(1);
                    },
                  ),
                  GestureDetector(
                    child: Container(
                      padding: const EdgeInsets.all(5),
                      decoration: BoxDecoration(
                        border: Border.all(),
                      ),
                      child: Text('Update all-${map['Num']}'),
                    ),
                    onTap: () {
                      _updateTableView.updateTableView();
                    },
                  )
                ],
              ),
            );
          },
          footerInTableView: (_) {
            return Container(
              height: 100,
              color: Colors.pink,
              child: Text('Table view bottom - ${map['Num']}'),
            );
          },
          headerInSection: (_, int section) {
            return Container(
              height: 60,
              color: Colors.yellow,
              child: Text(
                  'Table view head view of $section group - ${map['Num']}'),
            );
          },
          footerInSection: (_, int section) {
            return Container(
              height: 60,
              color: Colors.yellow,
              child: Text('Table view fotter view of $section group'),
            );
          },
          numberOfSection: (_) => 4,
          numberOfRowInSection: (_, int section) {
            final int res = section % 2;
            return res == 0 ? 2 : 6;
          },
          itemForRowAtIndexPath: (_, IDKitIndexPath indexPath) {
            if (indexPath.section == 1) {
              return Card(
                child: Text('Card - ${list[indexPath.row]}'),
              );
            } else {
              return Container(
                alignment: Alignment.center,
                child: Row(
                  children: const <Widget>[
                    Icon(Icons.access_alarm_outlined),
                    Text('Item'),
                  ],
                ),
                height: 100,
              );
            }
          },
          hideDivider: false,
          separateInSection: (_, int section) {
            return Container(
              height: 20,
              color: Colors.white,
              child:
                  Text('------------ Group split view -$section ------------'),
            );
          },
        ),
      ),
    );
  }
}
3
likes
110
pub points
27%
popularity

Publisher

unverified uploader

This component is an extension of the partial update of the single list and grouped list views. Functions:\1. Support for the update of a certain view. 2. Support for the update of a certain module view. 3. Support for the update of all views.

Repository (GitHub)
View/report issues

Documentation

API reference

License

unknown (LICENSE)

Dependencies

flutter

More

Packages that depend on idkit_tableview