Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Optimize the component logic and fix the problem that the user's Navigator.push() operation is invalid #134

Merged
merged 4 commits into from
Mar 28, 2022
Merged

Optimize the component logic and fix the problem that the user's Navigator.push() operation is invalid #134

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fb6a719
perf: Optimize `BrnPopupListWindow` `onItemClick` logic to aviod `Na…
violinday Mar 14, 2022
5e14b2e
perf: Optimize `BrnPopupListWindow` `onItemClick` logic to aviod `Na…
violinday Mar 15, 2022
2c47844
perf: Optimize `BrnPopupListWindow` `onItemClick` logic to aviod `Na…
violinday Mar 15, 2022
0b42162
[feature][2.2.x]: Add a Web Demo entrance;
violinday Mar 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 17 additions & 2 deletions example/lib/sample/components/navbar/nav_bar_example_page.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,7 +245,11 @@ class _NavBarPageState extends State<NavBarPage> with TickerProviderStateMixin {
key: actionKey,
iconPressed: () {
BrnPopupListWindow.showPopListWindow(context, actionKey,
offset: 10, data: ["aaaa", "bbbbb"]);
offset: 10, data: ["aaaa", "bbbbb"], onItemClick: (index, item){
BrnDialogManager.showConfirmDialog(context, cancel: 'cancel', confirm: 'confirm', message: 'message');
}, onDismiss: (){
BrnToast.show('onDismiss', context);
});
},
),
);
Expand Down Expand Up @@ -510,6 +514,12 @@ class _NavBarPageState extends State<NavBarPage> with TickerProviderStateMixin {
context,
keyLeading,
data: ["aaaa", "bbbbb"],
onItemClick: (index, data) {
BrnDialogManager.showConfirmDialog(context, cancel: 'cancel', confirm: 'confirm', message: 'message');
},
onDismiss: (){
BrnToast.show('onDismiss', context);
},
);
},
//输入框 文本内容变化的监听
Expand Down Expand Up @@ -568,7 +578,12 @@ class _NavBarPageState extends State<NavBarPage> with TickerProviderStateMixin {
leadClickCallback: (controller, update) {
//controller 是文本控制器，通过controller 可以拿到输入的内容 以及 对输入的内容更改
//update 是setState方法的方法命，update() 就可以刷新输入框
BrnPopupListWindow.showPopListWindow(context, keyLeading, data: ["aaaa", "bbbbb"], offset: 10);
BrnPopupListWindow.showPopListWindow(
context,
keyLeading,
data: ["aaaa", "bbbbb"],
offset: 10
);
},
//输入框 文本内容变化的监听
searchBarInputChangeCallback: (input) {
Expand Down
10 changes: 10 additions & 0 deletions example/web/assets/FontManifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
[
{
"family": "MaterialIcons",
"fonts": [
{
"asset": "fonts/MaterialIcons-Regular.otf"
}
]
}
]
Binary file added example/web/assets/fonts/MaterialIcons-Regular.otf
View file
Open in desktop
Binary file not shown.
Binary file added example/web/favicon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added example/web/icons/icon-192.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added example/web/icons/icon-512.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions example/web/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script defer src="main.dart.js" type="application/javascript"></script>
</head>
<body>
</body>
</html>
7 changes: 7 additions & 0 deletions example/web/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@

// TODO: change `my_app` to refer to your app package name.
import 'package:example/main.dart' as app;

main() async {
app.main();
}
23 changes: 23 additions & 0 deletions example/web/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{
"name": "Bruno Demo",
"short_name": "Bruno",
"start_url": ".",
"display": "Bruno",
"background_color": "#FFFFFFFF",
"theme_color": "#0175C2",
"description": "Bruno 是基于一整套设计体系的 Flutter 组件库。An enterprise-class package of Flutter components for mobile applications.",
"orientation": "portrait-primary",
"prefer_related_applications": false,
"icons": [
{
"src": "icons/Icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icons/Icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
17 changes: 9 additions & 8 deletions lib/src/components/button/collection/brn_button_panel.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,17 +202,18 @@ class _BrnButtonPanelState extends State<BrnButtonPanel> {
fontSize: 16));
},
popDirection: widget.popDirection,
onItemClick: (index, item) {
onItemClickInterceptor: (index, item) {
// 按钮不可用的时候，点击无响应；
if (_secondaryButtonList[index + 2].isEnable) {
return false;
} else {
return true;
}
},
onItemClick: (index, item) {
if (widget.secondaryButtonOnTap != null) {
if (_secondaryButtonList[index + 2].isEnable) {
widget.secondaryButtonOnTap!(index + 2);
return false;
} else {
return true;
}
widget.secondaryButtonOnTap!(index + 2);
}
return false;
});
},
);
Expand Down
137 changes: 72 additions & 65 deletions lib/src/components/popup/brn_popup_window.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,9 +66,6 @@ class BrnPopupWindow extends StatefulWidget {
/// 箭头图标水平方向的绝对偏移量，为 null 时则自动计算
final double? arrowOffset;

/// popUpWindow 消失回调，此回调会在 pop 之后执行
final VoidCallback? onDismiss;

/// popWindow 距离底部的距离小于此值的时候，
/// 自动将 popWindow 在 targetView 上面弹出
final double turnOverFromBottom;
Expand All @@ -91,7 +88,6 @@ class BrnPopupWindow extends StatefulWidget {
this.canWrap = false,
this.spaceMargin = 20,
this.arrowOffset,
this.onDismiss,
this.turnOverFromBottom = 50.0})
: super(key: key);

Expand Down Expand Up @@ -157,7 +153,6 @@ class BrnPopupWindow extends StatefulWidget {
canWrap: canWrap,
spaceMargin: spaceMargin,
arrowOffset: arrowOffset,
onDismiss: dismissCallback,
turnOverFromBottom: turnOverFromBottom,
)));
}
Expand Down Expand Up @@ -254,9 +249,6 @@ class _BrnPopupWindowState extends State<BrnPopupWindow> {
behavior: HitTestBehavior.translucent,
onTap: () {
Navigator.pop(context);
if (widget.onDismiss != null) {
widget.onDismiss!();
}
},
child: Material(
color: Colors.transparent,
Expand All @@ -270,9 +262,6 @@ class _BrnPopupWindowState extends State<BrnPopupWindow> {
),
),
onWillPop: () {
if (widget.onDismiss != null) {
widget.onDismiss!();
}
return Future.value(true);
}),
);
Expand Down Expand Up @@ -469,7 +458,13 @@ class BrnPopupRoute extends PopupRoute {
/// popup 中每个 Item 被点击时的回调，
/// [index] Item 的索引
/// [item] Item 内容
typedef BrnPopupListItemClick = Function(int index, String item);
typedef BrnPopupListItemClick = void Function(int index, String item);

/// popup 中每个 Item 被点击时，是否拦截点击事件
/// [index] Item 的索引
/// [item] Item 内容
/// 返回 true 则拦截点击事件，不再回调 [onItemClick]。
typedef BrnPopupListItemClickInterceptor = bool Function(int index, String item);

/// popup 用于构造自定义的 Item
/// [index] Item 的索引
Expand All @@ -484,17 +479,20 @@ class BrnPopupListWindow {
/// [popDirection] 箭头的方向
/// [itemBuilder] 自定义 item 构造方法
/// [onItemClick] item 点击回调
static void showButtonPanelPopList(context, GlobalKey popKey,
{List<String>? data,
BrnPopupDirection popDirection = BrnPopupDirection.bottom,
BrnPopupListItemBuilder? itemBuilder,
BrnPopupListItemClick? onItemClick}) {
/// [onItemClickInterceptor] item 点击拦截回调
/// [onDismiss] popUpWindow消失回调
static void showButtonPanelPopList(
context,
GlobalKey popKey, {
List<String>? data,
BrnPopupDirection popDirection = BrnPopupDirection.bottom,
BrnPopupListItemBuilder? itemBuilder,
BrnPopupListItemClick? onItemClick,
BrnPopupListItemClickInterceptor? onItemClickInterceptor,
VoidCallback? onDismiss,
}) {
TextStyle textStyle = TextStyle(
color: BrnThemeConfigurator.instance
.getConfig()
.commonConfig
.colorTextBase,
fontSize: 16);
color: BrnThemeConfigurator.instance.getConfig().commonConfig.colorTextBase, fontSize: 16);
double arrowHeight = 6.0;
Color borderColor = Color(0xffCCCCCC);
Color backgroundColor = Colors.white;
Expand All @@ -505,10 +503,8 @@ class BrnPopupListWindow {
double maxHeight = 200;
double borderRadius = 4;
bool hasCloseIcon = true;
assert(popKey.currentContext != null &&
popKey.currentContext!.findRenderObject() != null);
if (popKey.currentContext == null ||
popKey.currentContext!.findRenderObject() == null) return;
assert(popKey.currentContext != null && popKey.currentContext!.findRenderObject() != null);
if (popKey.currentContext == null || popKey.currentContext!.findRenderObject() == null) return;
Navigator.push(
context,
BrnPopupRoute(
Expand All @@ -522,18 +518,23 @@ class BrnPopupListWindow {
offset: offset,
widget: BrunoTools.isEmpty(data)
? Container(
constraints:
BoxConstraints(maxWidth: maxWidth, maxHeight: maxHeight),
constraints: BoxConstraints(maxWidth: maxWidth, maxHeight: maxHeight),
)
: Container(
constraints:
BoxConstraints(maxWidth: maxWidth, maxHeight: maxHeight),
constraints: BoxConstraints(maxWidth: maxWidth, maxHeight: maxHeight),
child: SingleChildScrollView(
child: Container(
padding: EdgeInsets.only(top: 6, bottom: 6),
child: Column(
children: _getItems(context, minWidth, maxWidth,
itemBuilder, textStyle, data!, onItemClick, null),
children:
_getItems(context, minWidth, maxWidth, itemBuilder, textStyle, data!,
(index, item) {
if (onItemClickInterceptor != null) {
bool isIntercept = onItemClickInterceptor(index, item);
if (isIntercept) return;
}
Navigator.pop(context, {'index': index, 'item': item});
}),
),
),
),
Expand All @@ -542,7 +543,14 @@ class BrnPopupListWindow {
borderRadius: borderRadius,
borderColor: borderColor,
spaceMargin: spaceMargin,
)));
))).then((result) {
if (onItemClick != null && result != null) {
onItemClick(result['index'], result['item']);
}
if (onDismiss != null) {
onDismiss();
}
});
}

/// 显示Popup List Window
Expand All @@ -551,17 +559,17 @@ class BrnPopupListWindow {
/// [popDirection] 箭头的方向
/// [offset] 距离targetView偏移量
/// [onItemClick] item 点击回调
/// [onItemClickInterceptor] item 点击拦截回调
/// [onDismiss] popUpWindow消失回调
static void showPopListWindow(context, GlobalKey popKey,
{List<String>? data,
BrnPopupDirection popDirection = BrnPopupDirection.bottom,
double offset = 0,
BrnPopupListItemClick? onItemClick,
BrnPopupListItemClickInterceptor? onItemClickInterceptor,
VoidCallback? onDismiss}) {
assert(popKey.currentContext != null &&
popKey.currentContext!.findRenderObject() != null);
if (popKey.currentContext == null ||
popKey.currentContext!.findRenderObject() == null) return;
assert(popKey.currentContext != null && popKey.currentContext!.findRenderObject() != null);
if (popKey.currentContext == null || popKey.currentContext!.findRenderObject() == null) return;

double arrowHeight = 6.0;
double borderRadius = 4;
Expand All @@ -570,21 +578,16 @@ class BrnPopupListWindow {
double maxWidth = 150;
double maxHeight = 200;
double? arrowOffset;
Color borderColor =
BrnThemeConfigurator.instance.getConfig().commonConfig.dividerColorBase;
Color borderColor = BrnThemeConfigurator.instance.getConfig().commonConfig.dividerColorBase;
Color backgroundColor = Colors.white;
TextStyle textStyle = TextStyle(
color: BrnThemeConfigurator.instance
.getConfig()
.commonConfig
.colorTextBase,
fontSize: 14);
color: BrnThemeConfigurator.instance.getConfig().commonConfig.colorTextBase, fontSize: 14);
bool hasCloseIcon = true;

Navigator.push(
context,
BrnPopupRoute(
child: BrnPopupWindow(
context,
BrnPopupRoute(
child: BrnPopupWindow(
context,
arrowHeight: arrowHeight,
popKey: popKey,
Expand All @@ -595,18 +598,22 @@ class BrnPopupListWindow {
offset: offset,
widget: BrunoTools.isEmpty(data)
? Container(
constraints:
BoxConstraints(maxWidth: maxWidth, maxHeight: maxHeight),
constraints: BoxConstraints(maxWidth: maxWidth, maxHeight: maxHeight),
)
: Container(
constraints:
BoxConstraints(maxWidth: maxWidth, maxHeight: maxHeight),
constraints: BoxConstraints(maxWidth: maxWidth, maxHeight: maxHeight),
child: SingleChildScrollView(
child: Container(
padding: EdgeInsets.only(top: 6, bottom: 6),
child: Column(
children: _getItems(context, minWidth, maxWidth, null,
textStyle, data!, onItemClick, onDismiss),
children: _getItems(context, minWidth, maxWidth, null, textStyle, data!,
(index, item) {
if (onItemClickInterceptor != null) {
bool isIntercept = onItemClickInterceptor(index, item);
if (isIntercept) return;
}
Navigator.pop(context, {'index': index, 'item': item});
}),
),
),
),
Expand All @@ -615,8 +622,16 @@ class BrnPopupListWindow {
borderRadius: borderRadius,
borderColor: borderColor,
spaceMargin: spaceMargin,
onDismiss: onDismiss,
)));
),
),
).then((result) {
if (onItemClick != null && result != null) {
onItemClick(result['index'], result['item']);
}
if (onDismiss != null) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

onDismiss 不是去掉了？

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

对外暴露的 onDismiss 回调没有去掉，仅去掉了 BrnPopupWindow Widget 中的 onDismiss 方法。采用 then 的方式在外部触发 onDismiss 回调

onDismiss();
}
});
}

static List<Widget> _getItems(
Expand All @@ -626,8 +641,7 @@ class BrnPopupListWindow {
BrnPopupListItemBuilder? itemBuilder,
TextStyle textStyle,
List<String> data,
BrnPopupListItemClick? onItemClick,
VoidCallback? onDismiss) {
BrnPopupListItemClick onItemClick) {
double textMaxWidth = _getMaxWidth(textStyle, data);
if (textMaxWidth + 52 < minWidth) {
textMaxWidth = minWidth;
Expand All @@ -639,14 +653,7 @@ class BrnPopupListWindow {
return data.map((f) {
return GestureDetector(
onTap: () {
if (onItemClick != null) {
dynamic isIntercept = onItemClick(data.indexOf(f), f);
if ((isIntercept is bool) && isIntercept) return;
}
Navigator.pop(context);
if (onDismiss != null) {
onDismiss();
}
onItemClick(data.indexOf(f), f);
},
child: Container(
width: textMaxWidth,
Expand Down