✨ ✨✨強大的flutter彈窗組件來了

時間 2019-11-05

標籤強大 flutter 組件简体版

原文原文鏈接

對全局彈窗的功能封裝，用語義化的方式對彈窗內部的內容進行填充，目前提供的功能git

支持少數語義化組件的方法，填充彈窗內部的組件內容
支持自定義語義化組件的方法，供開發者自由填充彈窗內部的組件內容
支持設置彈窗背景色、前景色、位置、動畫、點擊外部消失等功能，具體看下文
支持無Context調用彈窗，具體看下文

🎖 Installing

一、installgithub

dependencies:
 flutter_custom_dialog: ^1.0.4
複製代碼

二、import網絡

import 'package:flutter_custom_dialog/flutter_custom_dialog.dart';
複製代碼

🎖 Example

dialog_demoapp

divider ✅	body ✅	head&body ✅	listTile ✅	ListRadio ✅
progress ✅	progress&body ✅	pop menu ✅ 支持自定義位置

dialog_gravityless

bottom ✅	top ✅	left ✅	right ✅	center ✅
left bottom ✅	left top ✅	right bottom ✅	right top ✅

dialog_animationide

scaleIn
✅

fadeIn
✅

rotateIn
✅

customIn
✅ 支持自定義動畫

⚡ Dialog Property

彈窗的屬性設置能夠經過成員變量的方法去調用，具體詳見下表svg

YYDialog YYDialogDemo(BuildContext context) {
  return YYDialog().build(context)
    ..width = 220
    ..height = 500
    ..barrierColor = Colors.black.withOpacity(.3)
    ..animatedFunc = (child, animation) {
      return ScaleTransition(
        child: child,
        scale: Tween(begin: 0.0, end: 1.0).animate(animation),
      );
    }
    ..borderRadius = 4.0
    ..show();
}
複製代碼

支持的屬性函數

property	description	default
width	彈窗寬度	0
height	彈窗高度	自適應組件高度
duration	彈窗動畫出現的時間	250毫秒
gravity	彈窗出現的位置	居中
gravityAnimationEnable	彈窗出現的位置帶有的默認動畫是否可用	false
margin	彈窗的外邊距	EdgeInsets.all(0.0)
barrierColor	彈窗外的背景色	30%黑色
backgroundColor	彈窗內的背景色	白色
borderRadius	彈窗圓角	0.0
constraints	彈窗約束	最小寬高不低於10%
animatedFunc	彈窗出現的動畫	從中間出現
barrierDismissible	是否點擊彈出外部消失	true

支持的方法動畫

method	description
show[x,y]	顯示彈窗
dismiss	隱藏彈窗
isShowing	彈窗是否在展現

⚡ Semantic Widget

彈窗內部的組件內容提早經過語義化的函數封裝好經常使用的組件，以便快速構建出彈窗，具體見下表ui

YYDialog YYAlertDialogWithDivider(BuildContext context) {
  return YYDialog().build(context)
    ..width = 220
    ..borderRadius = 4.0
    ..text(
      padding: EdgeInsets.all(25.0),
      alignment: Alignment.center,
      text: "肯定要退出登陸嗎?",
      color: Colors.black,
      fontSize: 14.0,
      fontWeight: FontWeight.w500,
    )
    ..divider()
    ..doubleButton(
      padding: EdgeInsets.only(top: 10.0),
      gravity: Gravity.center,
      withDivider: true,
      text1: "取消",
      color1: Colors.redAccent,
      fontSize1: 14.0,
      fontWeight1: FontWeight.bold,
      onTap1: () {
        print("取消");
      },
      text2: "肯定",
      color2: Colors.redAccent,
      fontSize2: 14.0,
      fontWeight2: FontWeight.bold,
      onTap2: () {
        print("肯定");
      },
    )
    ..show();
}
複製代碼

支持的語義化組件

method	description
text	文本控件
doubleButton	雙按鈕控件
listViewOfListTile	列表Tile組件
listViewOfRadioButton	列表按鈕組件
divider	分割線組件
widget	自定義語義化組件

⚡ Custom Widget

自定義彈窗內部組件內容

因爲當前已有的語義化組件只是輔助快速搭建UI，在實際項目開發中遠遠不能知足需求
因此提供了自定義語義化組件的插入，由開發者自行將組件加入到彈窗內

經過widget()將組件插入彈窗

YYDialog YYDialogDemo(BuildContext context) {
  return YYDialog().build(context)
    ..width = 220
    ..height = 500
    ..widget(
      Padding(
        padding: EdgeInsets.all(0.0),
        child: Align(
          alignment: Alignment.centerLeft,
          child: Text(
            "",
            style: TextStyle(
              color: Colors.black,
              fontSize: 14.0,
              fontWeight: FontWeight.w100,
            ),
          ),
        ),
      ),
    )
    ..show();
}
複製代碼

⚡ 無Context調用

應用場景：在網絡請求回來後，在回調中是無Context能夠引用，這時候就須要預先初始化Context，後續就能夠不須要Context調用彈窗

一、init

在未彈窗以前先調用靜態方法YYDialog.init(context);

class AppHome extends StatelessWidget {
  Widget build(BuildContext context) {
    //一、初始化context
    YYDialog.init(context);
    //二、後續使用能夠不須要context
    ......
  }
}
複製代碼

二、use

直接使用YYDialog，注意必需要調用build()

YYDialog YYAlertDialogBody() {
  return YYDialog().build()
    ..width = 240
    ..text(
      text: "Hello YYDialog",
      color: Colors.grey[700],
    )
    ..show();
}
複製代碼