Presenting?Streams?in?Flutter小技巧

更新時間：2022年12月08日 14:28:24 作者：程序員界的小學生

這篇文章主要為大家介紹了Presenting?Streams?in?Flutter小技巧示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

如果我想要做一個組件，每秒更新時間，最開始的想法就是使用StatefulWidget, 然后每秒調(diào)用一下setState方法刷新數(shù)據(jù)

能不能換成使用StatelessWidget呢？可以的，不過用Stream來實現(xiàn)。

先創(chuàng)建一個AsyncSnapshot的拓展

extends PresentAsyncSnapshot<E> on AsyncSnapshot<E> {
    Widget present({
        required BuildContext context,
        Widget Function(BuildContext context)? onNone,
        Widget Function(BuildContext context, E data)? onData,
        Widget Function(BuildContext context, Object error, StackTrace stackTrace)? onError,
        Widget Function(BuildContext context)? onDoneWitNeitherDataNorError,
        Widget FUnction(BuildContext context)? onWaiting,
    }) {
        switch (connectionState) {
            case ConnectionState.none:
                return onNone?.call(context) ?? const SizedBox.shrink();
            case ConnectionState.waiting:
                return onWaiting?.call(context) ?? const CircularProgressIndicator();
            case ConnectionState.active: //future在done狀態(tài)產(chǎn)生值，但是stream在active狀態(tài)下就已經(jīng)持續(xù)產(chǎn)生值了
            case ConnectionState.done:
                if (hasError) {
                    return onError?.call(context, error!, stackTrace!) ?? const SizedBox.shrink();
                } else if (hasData) {
                    return onData?.call(context, data as E) ?? const SizedBox.shrink();
                } else {
                    reutrn onDoneWitNeitherDataNorError?.call(context) ?? const SizedBox.shrink();
                }
        }
    }
}

創(chuàng)建一個stream，每秒產(chǎn)生一個值

Stream<String> getDataTime() => Stream.perioodic(
    const Duration(seconds: 1),
    (_) => DateTime.now().toIso8601string(),
);

創(chuàng)建Stream拓展

為了方便使用，我又創(chuàng)建了一個Stream的拓展,為了內(nèi)部使用上面寫的PresentAsyncSnapshot拓展

extension PresentStream<E> on Stream<E> {
    Widget present({
        Widget Function(BuildContext context)? onNone,
        Widget Function(BuildContext context, E data)? onData,
        Widget Function(BuildContext context, Object error, E data)? onData,
        Widget Function(BuildContext context)? onDoneWitNeitherDataNorError,
        Widget Function(BuildContext context)? onWaiting.
    }) {
        return StreamBuilder<E>(
            stream: this,
            builder: (context, snapshot) => snapshot.present(
                context: context,
                onNone: onNone,
                onData: onData,
                onError: onError,
                onDoneWitNeitherDataNorError: onDoneWItNeitherDataNorError,
                onWaiting: onWaiting,
            ),
        );
    }
}

下面來測試一下,只需要在任何Stream的地方調(diào)用present()就能很簡單的使用，可以傳入你想要調(diào)用的任何方法的回調(diào)。

class HomePage extends StatelessWidget {
    const HomePage({Key? key}): super(key: key);
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            body: SafeArea(
                child: getDateTime().present(
                    onData: (_, dateTime) => Text(dateTime),
                ),
            ),
        );
    }
}

大功告成，下面看一下結(jié)果