Fair 2.0 release! What’s new

# Dynamic list

# scenes to be used

1. A fully dynamic list
2. Dynamic list + pull-down refresh
3. Dynamic list + pull-up to load more

# Preview effect

Pull Refresh Load More
pullRefresh loadMore

# Integration

(Because it is the Dart side component callback notification, we need to use the Dart to JS communication channel to process the data update. Therefore, we unified onRefresh,
And the following ScrollController Flutter type variable, customized to the Delegate template for unified processing, of course, it also supports user-defined more callback processing methods)

# custom delegate

class ListDelegate extends FairDelegate {
// Define Flutter system variables
ScrollController _scrollController;

// Register ListView component callback
@override
Map<String, Function> bindFunction() {
    var functions = super.bindFunction();
    functions.addAll({
        '_itemBuilder': _itemBuilder,
        '_onRefresh': _onRefresh,
    });
    return functions;
}

// register listener variable
@override Map<String, PropertyValue> bindValue() {
    var pros = super.bindValue();
    pros.addAll({
      '_scrollController': () => _scrollController,
    });
    return pros;
}

@override void initState() {
    // listen for sliding
    _scrollController = ScrollController()
    ..addListener(() {
        // Determine whether to slide to the end
        if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
            _onLoadMore();
        }
    });
}

// Call back the JS side method through Dart to JS Channel
void _onLoadMore() { runtime?.invokeMethod(pageName, '_onLoadMore', null); }

// Call back the JS side method through Dart to JS Channel
Future<void> _onRefresh() async { await runtime?.invokeMethod(pageName, '_onRefresh', null); }

// Call back the JS side method through Dart to JS Channel
Widget _itemBuilder(context, index) {
    var result = runtime?.invokeMethodSync(pageName, '_onItemByIndex', [index]);
    var value = jsonDecode(result); var itemData = value['result']['result'];
    return FairWidget(name: itemData, path: 'assets/bundle/lib_src_page_list_sample_list_with_logic.fair.json', data: {'fairProps':jsonEncode({'item': '${itemData}'})},
); } }

# 2. ListView binding message

RefreshIndicator(
        //Pull down to refresh
        displacement: 10.0,
        child: Sugar.ifEqualBool(listIsEmpty(),
            trueValue: Center(
              child: CircularProgressIndicator(), // Circulate without data
            ),
            falseValue: ListView.builder(
                controller: _scrollController,
                itemCount: list.length + 1,
                itemBuilder: _itemBuilder)),
        onRefresh: _onRefresh),
  )
Last Update: 6/28/2022, 4:40:25 PM
Copyright © 2020 58.com | Powered by The Fair Authors