DEV/flutter_flutter
1
0
Fork 0
mirror of https://github.com/flutter/flutter.git synced 2026-02-20 02:29:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Menu in StocksApp should dismiss when tapping elsewhere

Browse Source 
When the StocksApp menu is showing, the user shouldn't be able to interact with
the rest of the app. Instead, taps outside the menu should dismiss the menu.

This CL makes that happen by adding a ModalOverlay on top of the app. We might
want to do something fancier in the future using event delegation, but this
works for now.

R=rafaelw@chromium.org

Review URL: https://codereview.chromium.org/1031093002
This commit is contained in:
Adam Barth 2015-03-25 10:43:35 -07:00
parent 171ff643ef
commit 707968b1db
2 changed files with 50 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
examples/stocks-fn/lib/stock_app.dart
View File

@ -11,6 +11,7 @@ import 'package:sky/framework/components/icon_button.dart';
import 'package:sky/framework/components/input.dart';
import 'package:sky/framework/components/menu_divider.dart';
import 'package:sky/framework/components/menu_item.dart';
import 'package:sky/framework/components/modal_overlay.dart';
import 'package:sky/framework/components/popup_menu.dart';
import 'package:sky/framework/components/scaffold.dart';
import 'package:sky/framework/debug/tracing.dart';
@ -61,19 +62,29 @@ class StocksApp extends App {
});
}
void _handleSearchQueryChanged(query) {
void _handleSearchQueryChanged(String query) {
setState(() {
_searchQuery = query;
});
}
void _handleMenuClick(_) {
void _handleMenuShow(_) {
setState(() {
_menuController = new PopupMenuController();
_menuController.open();
});
}
void _handleMenuHide(_) {
setState(() {
_menuController.close().then((_) {
setState(() {
_menuController = null;
});
});
});
}
Drawer buildDrawer() {
return new Drawer(
controller: _drawerController,
@ -116,7 +127,7 @@ class StocksApp extends App {
onGestureTap: _handleSearchBegin),
new IconButton(
icon: 'navigation/more_vert_white',
onGestureTap: _handleMenuClick)
onGestureTap: _handleMenuShow)
]),
_actionBarStyle);
}
@ -135,25 +146,17 @@ class StocksApp extends App {
_searchBarStyle);
}
void addMenuToOverlays(List<Node> overlays) {
if (_menuController == null)
return;
overlays.add(new ModalOverlay(
children: [new StockMenu(controller: _menuController)],
onDismiss: _handleMenuHide));
}
Node build() {
List<Node> overlays = [];
if (_menuController != null) {
overlays.add(new EventTarget(
new StockMenu(controller: _menuController),
onGestureTap: (_) {
// TODO(abarth): We should close the menu when you tap away from the
// menu rather than when you tap on the menu.
setState(() {
_menuController.close().then((_) {
setState(() {
_menuController = null;
});
});
});
}
));
}
addMenuToOverlays(overlays);
return new Scaffold(
header: _isSearching ? buildSearchBar() : buildActionBar(),

27
framework/components/modal_overlay.dart Normal file
View File

@ -0,0 +1,27 @@
// Copyright 2015 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import '../fn.dart';
class ModalOverlay extends Component {
static final Style _style = new Style('''
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;''');
List<Node> children;
GestureEventListener onDismiss;
ModalOverlay({ Object key, this.children, this.onDismiss }) : super(key: key);
Node build() {
return new EventTarget(
new Container(
style: _style,
children: children),
onGestureTap: onDismiss);
}
}