這一次，解決Flutter Dialog的各種痛點(diǎn)！

功能更新頻繁，請以github上都中文介紹為準(zhǔn)：https://github.com/fluttercandies/flutter_smart_dialog

前言

Q：你一生中聞過最臭的東西，是什么？

A：我那早已腐爛的夢。

兄弟萌?。?！我又來了！

這次，我能自信的對大家說：我終于給大家?guī)Я艘粋€，能真正幫助大家解決諸多坑比場景的pub包！

將之前的flutter_smart_dialog，在保持api穩(wěn)定的基礎(chǔ)上，進(jìn)行了各種抓頭重構(gòu)，解決了一系列問題

現(xiàn)在，我終于可以說：它現(xiàn)在是一個簡潔，強(qiáng)大，侵入性極低的pub包！

關(guān)于侵入性問題

  • 之前為了解決返回關(guān)閉彈窗，使用了一個很不優(yōu)雅的解決方法，導(dǎo)致侵入性有點(diǎn)高
  • 這真是讓我如坐針氈，如芒刺背，如鯁在喉，這個問題終于搞定了！

同時，我在pub包內(nèi)部設(shè)計(jì)了一個彈窗棧，能自動移除棧頂彈窗，也可以定點(diǎn)移除棧內(nèi)標(biāo)記的彈窗。

問題

使用系統(tǒng)彈窗存在一系列坑，來和各位探討探討

  • 必須傳BuildContext

    • 在一些場景必須多做一些傳參工作，蛋痛但不難的問題

  • loading彈窗

    • 使用系統(tǒng)彈窗做loading彈窗，肯定遇到過這個坑比問題
      • loading封裝在網(wǎng)絡(luò)庫里面：請求網(wǎng)絡(luò)時加載loading，手賤按了返回按鈕，關(guān)閉了loading
      • 然后請求結(jié)束后發(fā)現(xiàn)：特么我的頁面怎么被關(guān)了?。?！
    • 系統(tǒng)彈窗就是一個路由頁面，關(guān)閉系統(tǒng)就是用pop方法，這很容易誤關(guān)正常頁面
      • 當(dāng)然肯定有解決辦法，路由監(jiān)聽的地方處理，此處就不細(xì)表了

  • 某頁面彈出了多個系統(tǒng)Dialog，很難定點(diǎn)關(guān)閉某個非棧頂彈窗

    • 蛋蛋，這是路由入棧出棧機(jī)制導(dǎo)致的，理解的同時也一樣要吐槽

  • 系統(tǒng)Dialog，點(diǎn)擊事件無法穿透暗色背景

    • 這個坑比問題，我是真沒轍

思考

上面列舉了一些比較常見的問題，最嚴(yán)重的問題，應(yīng)該就是loading的問題

  • loading是個超高頻使用的彈窗，關(guān)閉loading彈窗的方法，同時也能關(guān)閉正常使用的頁面，本身就是一個隱患
  • 本菜狗不具備大廠大佬們魔改flutter的能力，菜則思變，我只能從其它方向切入，尋求解決方案

系統(tǒng)的Page就是基于Overlay去實(shí)現(xiàn)的，咱們也要騷起來，從Overlay入手

這次，我要一次性幫各位解決：toast消息，loading彈窗，以及更強(qiáng)大的自定義dialog！

快速上手

初始化

dependencies:
  flutter_smart_dialog: ^3.0.1

初始化方式一：強(qiáng)力推薦??

  • 接入方式更加簡潔
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage,
      // here
      navigatorObservers: [FlutterSmartDialog.observer],
      // here
      builder: FlutterSmartDialog.init(),
    );
  }
}

初始化方式二：兼容老版本??

  • 老版本初始化方式仍然有效；為了確保低侵入性，你需要額外增加倆個參數(shù)
    • 實(shí)例MaterialApp之前，調(diào)用下FlutterSmartDialog.monitor()
    • 增加FlutterSmartDialog.observer 
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // here
    FlutterSmartDialog.monitor();
    return MaterialApp(
      home: HomePage,
      // here
      navigatorObservers: [FlutterSmartDialog.observer],
      /// here
      builder: (BuildContext context, Widget? child) {
        return FlutterSmartDialog(child: child);
      },
    );
  }
}

大功告成??

上面?zhèn)z種初始化方式，任選一種即可；然后，就可以完整使用本庫的所有功能了

我非常推薦第一種初始化的方式，因?yàn)樽銐蚝啙?；簡潔明了的東西用起來，會讓人心情愉悅??

極簡使用

  • toast使用??
SmartDialog.showToast('test toast');
toastDefault
  • loading使用?
SmartDialog.showLoading();
await Future.delayed(Duration(seconds: 2));
SmartDialog.dismiss();
loadingDefault
  • dialog使用??
var custom = Container(
    height: 80,
    width: 180,
    decoration: BoxDecoration(
        color: Colors.black,
        borderRadius: BorderRadius.circular(20),
    ),
    alignment: Alignment.center,
    child: Text('easy custom dialog', style: TextStyle(color: Colors.white)),
);
// here
SmartDialog.show(widget: custom, isLoadingTemp: false);
dialogEasy

OK，上面展示了，只需要極少的代碼，就可以調(diào)用相應(yīng)的功能

當(dāng)然，內(nèi)部還有不少地方做了特殊優(yōu)化，接下來，我會詳細(xì)的向大家描述下

你可能會有的疑問

初始化框架的時候，相比以前，居然讓大家多寫了一個參數(shù)，內(nèi)心十分愧疚??

關(guān)閉頁面本質(zhì)上是一個比較復(fù)雜的情況，涉及到

  • 物理返回按鍵
  • AppBar的back按鈕
  • 手動pop

為了監(jiān)控這些情況，不得已增加了一個路由監(jiān)控參數(shù)

關(guān)于 FlutterSmartDialog.init()

本方法不會占用你的builder參數(shù)，init內(nèi)部回調(diào)出來了builder，你可以大膽放心的繼續(xù)套

  • 例如：繼續(xù)套Bloc全局實(shí)例??
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage,
      navigatorObservers: [FlutterSmartDialog.observer],
      builder: FlutterSmartDialog.init(builder: _builder),
    );
  }
}

Widget _builder(BuildContext context, Widget? child) {
  return MultiBlocProvider(
    providers: [
      BlocProvider.value(value: BlocSpanOneCubit()),
    ],
    child: child!,
  );
}

實(shí)體返回鍵

對返回按鈕的監(jiān)控，是非常重要的，基本能覆蓋大多數(shù)情況

initBack

pop路由

雖然對返回按鈕的監(jiān)控能覆蓋大多數(shù)場景，但是一些手動pop的場景就需要新增參數(shù)監(jiān)控

  • 不加FlutterSmartDialog.observer
    • 如果打開了穿透參數(shù)（就可以和彈窗后的頁面交互），然后手動關(guān)閉頁面
    • 就會出現(xiàn)這種很尷尬的情況
initPopOne
  • 加了FlutterSmartDialog.observer，就能比較合理的處理了
    • 當(dāng)然，這里的過渡動畫，也提供了參數(shù)控制是否開啟 ??
initPopTwo

超實(shí)用的參數(shù)：backDismiss

  • 這個參數(shù)是默認(rèn)設(shè)置為true，返回的時候會默認(rèn)關(guān)閉彈窗；如果設(shè)置為false，將不會關(guān)閉頁面
    • 這樣就可以十分輕松的做一個緊急彈窗，禁止用戶的下一步操作
  • 我們來看一個場景：假定某開源作者決定棄坑軟件，不允許用戶再使用該軟件的彈窗
SmartDialog.show(
  // here
  backDismiss: false,
  clickBgDismissTemp: false,
  isLoadingTemp: false,
  widget: Container(
    height: 480,
    width: 500,
    padding: EdgeInsets.all(20),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(20),
      color: Colors.white,
    ),
    alignment: Alignment.topCenter,
    child: SingleChildScrollView(
      child: Wrap(
        direction: Axis.vertical,
        crossAxisAlignment: WrapCrossAlignment.center,
        spacing: 10,
        children: [
          // title
          Text(
            '特大公告',
            style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
          ),
          // content
          Text('鄙人日夜鉆研下面秘籍，終于成功釣到富婆'),
          Image.network(
            'https://cdn.jsdelivr.net/gh/xdd666t/MyData@master/pic/flutter/blog/20211102213746.jpeg',
            height: 200,
            width: 400,
          ),
          Text('鄙人思考了三秒鐘，懷著\'沉重\'的心情，決定棄坑本開源軟件'),
          Text('本人今后的生活是富婆和遠(yuǎn)方，已無\'精力\' 再維護(hù)本開源軟件了'),
          Text('各位叼毛，有緣江湖再見！'),
          // button (only method of close the dialog)
          ElevatedButton(
            onPressed: () => SmartDialog.dismiss(),
            child: Text('再會！'),
          )
        ],
      ),
    ),
  ),
);
hardClose

從上面的效果圖可以看出來

  • 點(diǎn)擊遮罩，無法關(guān)閉彈窗
  • 點(diǎn)擊返回按鈕無法關(guān)閉彈窗
  • 只能點(diǎn)我們自己的按鈕，才能關(guān)閉彈窗，點(diǎn)擊按鈕的邏輯可以直接寫成關(guān)閉app之類

只需要倆個簡單的參數(shù)設(shè)置，就能實(shí)現(xiàn)這樣一個很棒的應(yīng)急彈窗

設(shè)置全局參數(shù)

SmartDialog的全局參數(shù)都有著一個比較合理的默認(rèn)值

為了應(yīng)付多變的場景，你可以修改符合你自己要求的全局參數(shù)

  • 設(shè)置符合你的要求的數(shù)據(jù)，放在app入口就行初始化就行
    • 注：如果沒有特殊要求，可以不用初始化全局參數(shù)（內(nèi)部皆有默認(rèn)值）
SmartDialog.config
  ..alignment = Alignment.center
  ..isPenetrate = false
  ..clickBgDismiss = true
  ..maskColor = Colors.black.withOpacity(0.3)
  ..maskWidget = null
  ..animationDuration = Duration(milliseconds: 260)
  ..isUseAnimation = true
  ..isLoading = true
  ..debounce = false
  ..debounceTime = Duration(milliseconds: 300);
  • 代碼的注釋寫的很完善，某個參數(shù)不明白的，點(diǎn)進(jìn)去看看就行了
image-20211102223129866

Toast篇

toast的特殊性

嚴(yán)格來說，toast是一個非常特殊的彈窗，我覺得理應(yīng)具備下述的特征

toast消息理應(yīng)一個個展示，后續(xù)消息不應(yīng)該頂?shù)羟懊娴膖oast

  • 這是一個坑點(diǎn)，如果框架內(nèi)部不做處理，很容易出現(xiàn)后面toast會直接頂?shù)羟懊鎡oast的情況
toastOne

展示在頁面最上層，不應(yīng)該被一些彈窗之類遮擋

  • 可以發(fā)現(xiàn)loading和dialog的遮罩等布局，均未遮擋toast信息
toastTwo

對鍵盤遮擋情況做處理

  • 鍵盤這玩意有點(diǎn)坑，會直接遮擋所有布局，只能曲線救國
    • 在這里做了一個特殊處理，當(dāng)喚起鍵盤的時候，toast自己會動態(tài)的調(diào)整自己和屏幕底部的距離
    • 這樣就能起到一個，鍵盤不會遮擋toast的效果
toastSmart

自定義Toast

參數(shù)說明

toast暴露的參數(shù)其實(shí)并不多，只提供了四個參數(shù)

  • 例如：toast字體大小，字體顏色，toast的背景色等等之類，我都沒提供參數(shù)
    • 一是覺得提供了這些參數(shù)，會讓整個參數(shù)輸入變的非常多，亂花漸入迷人眼
    • 二是覺得就算我提供了很多參數(shù)，也不一定會滿足那些奇奇怪怪的審美和需求
  • 基于上述的考慮，我直接提供了底層參數(shù)，直接將widget參數(shù)提供出來
    • 你可以隨心所欲的定制toast了
    • 注意：使用了widget參數(shù)，msg和alignment參數(shù)會失效
image-20211031155838900

調(diào)整toast顯示的位置

SmartDialog.showToast('the toast at the bottom');
SmartDialog.showToast('the toast at the center', alignment: Alignment.center);
SmartDialog.showToast('the toast at the top', alignment: Alignment.topCenter);
toastLocation

更強(qiáng)大的自定義toast

  • 首先，整一個自定義toast
class CustomToast extends StatelessWidget {
  const CustomToast(this.msg, {Key? key}) : super(key: key);

  final String msg;

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.bottomCenter,
      child: Container(
        margin: EdgeInsets.only(bottom: 30),
        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 7),
        decoration: BoxDecoration(
          color: _randomColor(),
          borderRadius: BorderRadius.circular(100),
        ),
        child: Row(mainAxisSize: MainAxisSize.min, children: [
          //icon
          Container(
            margin: EdgeInsets.only(right: 15),
            child: Icon(Icons.add_moderator, color: _randomColor()),
          ),

          //msg
          Text('$msg', style: TextStyle(color: Colors.white)),
        ]),
      ),
    );
  }

  Color _randomColor() {
    return Color.fromRGBO(
      Random().nextInt(256),
      Random().nextInt(256),
      Random().nextInt(256),
      1,
    );
  }
}
  • 使用
SmartDialog.showToast('', widget: CustomToast('custom toast'));
  • 效果
toastCustom

Loading篇

避坑指南

  • 開啟loading后，可以使用以下方式關(guān)閉
    • SmartDialog.dismiss()：可以關(guān)閉loading和dialog
    • status設(shè)置為SmartStatus.loading：僅僅關(guān)閉loading
// easy close
SmartDialog.dismiss();
// exact close
SmartDialog.dismiss(status: SmartStatus.loading);
  • 一般來說，loading彈窗是封裝在網(wǎng)絡(luò)庫里面的，隨著請求狀態(tài)的自動開啟和關(guān)閉
    • 基于這種場景，我建議：使用dismiss時，加上status參數(shù)，將其設(shè)置為：SmartStatus.loading
  • 坑比場景
    • 網(wǎng)絡(luò)請求加載的時候，loading也隨之打開，這時很容易誤觸返回按鈕，關(guān)閉loading
    • 當(dāng)網(wǎng)絡(luò)請求結(jié)束時，會自動調(diào)用dismiss方法
    • 因?yàn)閘oading已被關(guān)閉，假設(shè)此時頁面又有SmartDialog的彈窗，未設(shè)置status的dismiss就會關(guān)閉SmartDialog的彈窗
    • 當(dāng)然，這種情況很容易解決，封裝進(jìn)網(wǎng)絡(luò)庫的loading，使用：SmartDialog.dismiss(status: SmartStatus.loading); 關(guān)閉就行了
  • status參數(shù)，是為了精確關(guān)閉對應(yīng)類型彈窗而設(shè)計(jì)的參數(shù)，在一些特殊場景能起到巨大的作用
    • 如果大家理解這個參數(shù)的含義，那對于何時添加status參數(shù)，必能胸有成竹

參數(shù)說明

參數(shù)在注釋里面寫的十分詳細(xì)，就不贅述了，來看看效果

image-20211031215728656
  • maskWidgetTemp：強(qiáng)大的遮罩自定義功能??，發(fā)揮你的腦洞吧。。。
var maskWidget = Container(
  width: double.infinity,
  height: double.infinity,
  child: Opacity(
    opacity: 0.6,
    child: Image.network(
      'https://cdn.jsdelivr.net/gh/xdd666t/MyData@master/pic/flutter/blog/20211101103911.jpeg',
      fit: BoxFit.fill,
    ),
  ),
);
SmartDialog.showLoading(maskWidgetTemp: maskWidget);
loadingOne
  • maskColorTemp：支持快捷自定義遮罩顏色
SmartDialog.showLoading(maskColorTemp: randomColor().withOpacity(0.3));

/// random color
Color randomColor() => Color.fromRGBO(
    Random().nextInt(256), Random().nextInt(256), Random().nextInt(256), 1);
loadingTwo
  • background：支持加載背景自定義
SmartDialog.showLoading(background: randomColor());

/// random color
Color randomColor() => Color.fromRGBO(
    Random().nextInt(256), Random().nextInt(256), Random().nextInt(256), 1);
loadingThree
  • isLoadingTemp：動畫效果切換
SmartDialog.showLoading(isLoadingTemp: false);
loadingFour
  • isPenetrateTemp：交互事件可以穿透遮罩，這是個十分有用的功能，對于一些特殊的需求場景十分關(guān)鍵
SmartDialog.showLoading(isPenetrateTemp: true);
loadingFive

自定義Loading

使用showLoading可以輕松的自定義出強(qiáng)大的loading彈窗；鄙人腦洞有限，就簡單演示下

自定義一個loading布局

class CustomLoading extends StatefulWidget {
  const CustomLoading({Key? key, this.type = 0}) : super(key: key);

  final int type;

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

class _CustomLoadingState extends State<CustomLoading>
    with TickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    _controller = AnimationController(
      duration: const Duration(milliseconds: 800),
      vsync: this,
    );
    _controller.forward();
    _controller.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        _controller.reset();
        _controller.forward();
      }
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      // smile
      Visibility(visible: widget.type == 0, child: _buildLoadingOne()),

      // icon
      Visibility(visible: widget.type == 1, child: _buildLoadingTwo()),

      // normal
      Visibility(visible: widget.type == 2, child: _buildLoadingThree()),
    ]);
  }

  Widget _buildLoadingOne() {
    return Stack(alignment: Alignment.center, children: [
      RotationTransition(
        alignment: Alignment.center,
        turns: _controller,
        child: Image.network(
          'https://cdn.jsdelivr.net/gh/xdd666t/MyData@master/pic/flutter/blog/20211101174606.png',
          height: 110,
          width: 110,
        ),
      ),
      Image.network(
        'https://cdn.jsdelivr.net/gh/xdd666t/MyData@master/pic/flutter/blog/20211101181404.png',
        height: 60,
        width: 60,
      ),
    ]);
  }

  Widget _buildLoadingTwo() {
    return Stack(alignment: Alignment.center, children: [
      Image.network(
        'https://cdn.jsdelivr.net/gh/xdd666t/MyData@master/pic/flutter/blog/20211101162946.png',
        height: 50,
        width: 50,
      ),
      RotationTransition(
        alignment: Alignment.center,
        turns: _controller,
        child: Image.network(
          'https://cdn.jsdelivr.net/gh/xdd666t/MyData@master/pic/flutter/blog/20211101173708.png',
          height: 80,
          width: 80,
        ),
      ),
    ]);
  }

  Widget _buildLoadingThree() {
    return Center(
      child: Container(
        height: 120,
        width: 180,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(15),
        ),
        alignment: Alignment.center,
        child: Column(mainAxisSize: MainAxisSize.min, children: [
          RotationTransition(
            alignment: Alignment.center,
            turns: _controller,
            child: Image.network(
              'https://cdn.jsdelivr.net/gh/xdd666t/MyData@master/pic/flutter/blog/20211101163010.png',
              height: 50,
              width: 50,
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 20),
            child: Text('loading...'),
          ),
        ]),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

來看看效果

  • 效果一
SmartDialog.showLoading(isLoadingTemp: false, widget: CustomLoading());
await Future.delayed(Duration(seconds: 2));
SmartDialog.dismiss();
loadingSmile
  • 效果二
SmartDialog.showLoading(
    isLoadingTemp: false,
    widget: CustomLoading(type: 1),
);
await Future.delayed(Duration(seconds: 2));
SmartDialog.dismiss();
loadingIcon
  • 效果三
SmartDialog.showLoading(widget: CustomLoading(type: 2));
await Future.delayed(Duration(seconds: 2));
SmartDialog.dismiss();
loadingNormal

Dialog篇

花里胡哨

彈窗從不同位置彈出，動畫是有區(qū)別的

image-20211031221419600
  • alignmentTemp：該參數(shù)設(shè)置不同，動畫效果會有所區(qū)別
var location = ({
  double width = double.infinity,
  double height = double.infinity,
}) {
  return Container(width: width, height: height, color: randomColor());
};

//left
SmartDialog.show(
  widget: location(width: 70),
  alignmentTemp: Alignment.centerLeft,
);
await Future.delayed(Duration(milliseconds: 500));
//top
SmartDialog.show(
  widget: location(height: 70),
  alignmentTemp: Alignment.topCenter,
);
await Future.delayed(Duration(milliseconds: 500));
//right
SmartDialog.show(
  widget: location(width: 70),
  alignmentTemp: Alignment.centerRight,
);
await Future.delayed(Duration(milliseconds: 500));
//bottom
SmartDialog.show(
  widget: location(height: 70),
  alignmentTemp: Alignment.bottomCenter,
);
await Future.delayed(Duration(milliseconds: 500));
//center
SmartDialog.show(
  widget: location(height: 100, width: 100),
  alignmentTemp: Alignment.center,
  isLoadingTemp: false,
);
dialogLocation
  • isPenetrateTemp：交互事件穿透遮罩
SmartDialog.show(
    alignmentTemp: Alignment.centerRight,
    isPenetrateTemp: true,
    clickBgDismissTemp: false,
    widget: Container(
        width: 80,
        height: double.infinity,
        color: randomColor(),
    ),
);
dialogPenetrate

dialog棧

  • 這是一個強(qiáng)大且實(shí)用的功能！
    • 可以很輕松的定點(diǎn)關(guān)閉某個彈窗
var stack = ({
  double width = double.infinity,
  double height = double.infinity,
  String? msg,
}) {
  return Container(
    width: width,
    height: height,
    color: randomColor(),
    alignment: Alignment.center,
    child: Text('dialog $msg', style: TextStyle(color: Colors.white)),
  );
};

//left
SmartDialog.show(
  tag: 'A',
  widget: stack(msg: 'A', width: 70),
  alignmentTemp: Alignment.centerLeft,
);
await Future.delayed(Duration(milliseconds: 500));
//top
SmartDialog.show(
  tag: 'B',
  widget: stack(msg: 'B', height: 70),
  alignmentTemp: Alignment.topCenter,
);
await Future.delayed(Duration(milliseconds: 500));
//right
SmartDialog.show(
  tag: 'C',
  widget: stack(msg: 'C', width: 70),
  alignmentTemp: Alignment.centerRight,
);
await Future.delayed(Duration(milliseconds: 500));
//bottom
SmartDialog.show(
  tag: 'D',
  widget: stack(msg: 'D', height: 70),
  alignmentTemp: Alignment.bottomCenter,
);
await Future.delayed(Duration(milliseconds: 500));

//center：the stack handler
SmartDialog.show(
  alignmentTemp: Alignment.center,
  isLoadingTemp: false,
  widget: Container(
    decoration: BoxDecoration(
        color: Colors.white, borderRadius: BorderRadius.circular(15)),
    padding: EdgeInsets.symmetric(horizontal: 30, vertical: 20),
    child: Wrap(spacing: 20, children: [
      ElevatedButton(
        child: Text('close dialog A'),
        onPressed: () => SmartDialog.dismiss(tag: 'A'),
      ),
      ElevatedButton(
        child: Text('close dialog B'),
        onPressed: () => SmartDialog.dismiss(tag: 'B'),
      ),
      ElevatedButton(
        child: Text('close dialog C'),
        onPressed: () => SmartDialog.dismiss(tag: 'C'),
      ),
      ElevatedButton(
        child: Text('close dialog D'),
        onPressed: () => SmartDialog.dismiss(tag: 'D'),
      ),
    ]),
  ),
);
dialogStack

騷氣的小技巧

有一種場景比較蛋筒

  • 我們使用StatefulWidget封裝了一個小組件
  • 在某個特殊的情況，我們需要在這個組件外部，去觸發(fā)這個組件內(nèi)部的一個方法
  • 對于這種場景，有不少實(shí)現(xiàn)方法，但是弄起來可能有點(diǎn)麻煩

這里提供一個簡單的小思路，可以非常輕松的觸發(fā)，組件內(nèi)部的某個方法

  • 建立一個小組件
class OtherTrick extends StatefulWidget {
  const OtherTrick({Key? key, this.onUpdate}) : super(key: key);

  final Function(VoidCallback onInvoke)? onUpdate;

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

class _OtherTrickState extends State<OtherTrick> {
  int _count = 0;

  @override
  void initState() {
    // here
    widget.onUpdate?.call(() {
      _count++;
      setState(() {});
    });

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 50, vertical: 20),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10),
        ),
        child: Text('Counter： $_count ', style: TextStyle(fontSize: 30.0)),
      ),
    );
  }
}
  • 展示這個組件，然后外部觸發(fā)它
VoidCallback? callback;

// display
SmartDialog.show(
  alignmentTemp: Alignment.center,
  widget: OtherTrick(
    onUpdate: (VoidCallback onInvoke) => callback = onInvoke,
  ),
);

await Future.delayed(Duration(milliseconds: 500));

// handler
SmartDialog.show(
  alignmentTemp: Alignment.centerRight,
  maskColorTemp: Colors.transparent,
  widget: Container(
    height: double.infinity,
    width: 150,
    color: Colors.white,
    alignment: Alignment.center,
    child: ElevatedButton(
      child: Text('add'),
      onPressed: () => callback?.call(),
    ),
  ),
);
  • 來看下效果
trick

最后

相關(guān)地址

哎，人總是在不斷的迷茫中前行。。。

夢
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容