Question

因此，目前我有一个联系人列表，可以在静态列表中查看我的联系人。我希望能够单击搜索栏，而不是将其拖放到联系人上，而不会遮挡用户视图，而是会在新的空白页中打开搜索

<!DOCTYPE html> 
<html>
<head>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <!-- <link rel="stylesheet" href="styles.css" /> -->
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

    </head>

<body>
    <header>
          <div class="ui-body ui-body-a ui-corner-all">
                <h3>BCIT Campuses</h3>
                      <p>This app is designed to show you the various BCIT Campus locations</p>
                  </div>
            </header>
    <form>
        <div class="ui-field-contain">
            <label for="select-native-1">Basic:</label>
            <select name="select-native-1" id="select-native-1">
                <option value="1">The 1st Option</option>
                <option value="2">The 2nd Option</option>
                <option value="3">The 3rd Option</option>
                <option value="4">The 4th Option</option>
            </select>
        </div>
        </form>
        <div data-role="page" id="map-page" data-url="map-page">
                <div data-role="header" data-theme="a">
                <h1>Maps</h1>
                </div>
                <div role="main" class="ui-content" id="map-canvas">
                    <!-- map loads here... -->
                </div>
            </div>

        <footer>
                 <div class="ui-body ui-body-a ui-corner-all">
                        <h4>Wade Barrie</h4>
                          </div>
        </footer>
</body>
<script>
        /*
         * Google Maps documentation: http://code.google.com/apis/maps/documentation/javascript/basics.html
         * Geolocation documentation: http://dev.w3.org/geo/api/spec-source.html
         */
         $( document ).on( "pageinit", "#map-page", function() {
            var defaultLatLng = new google.maps.LatLng(34.0983425, -118.3267434);  // Default to Hollywood, CA when no geolocation support
            if ( navigator.geolocation ) {
                function success(pos) {
                    // Location found, show map with these coordinates
                    drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
                }
                function fail(error) {
                    drawMap(defaultLatLng);  // Failed to find location, show default map
                }
                // Find the users current position.  Cache the location for 5 minutes, timeout after 6 seconds
                navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
            } else {
                drawMap(defaultLatLng);  // No geolocation support, show default map
            }
            function drawMap(latlng) {
                var myOptions = {
                    zoom: 10,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
                // Add an overlay to the map of current lat/lng
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    title: "Greetings!"
                });
            }
        });
        </script>
</html>

Answer 1

您可以将Scaffold的身体包裹在导航器中，并在开始键入内容时将搜索页面推入该导航器。像这样：

...

// Declare this at the top
_navigatorKey = new GlobalKey<NavigatorState>();

...

// onChanged method for your search text field
onChanged: (value) {
  if (shouldShowSearchResults) {  // TODO
    _navigatorKey.currentState.pushNamed('contacts/search');
  } else if (shouldHideSearchResults {  // TODO
    _navigatorKey.currentState.pop();
  }
}

...

// New body for your Scaffold
body: new Navigator(
  key: _navigatorKey,
  initialRoute: 'contacts',
  onGenerateRoute: (RouteSettings settings) {
    if (settings.name == 'contacts') {
      return new MaterialPageRoute(
        builder: (_) => new ContactList(kContacts),
        settings: settings
      );
    } else if (settings.name == 'contacts/search') {
      return new MaterialPageRoute(
        builder: (_) => new SearchPage(contacts: kContacts, search: searchValue),  // TODO
        settings: settings
      );
    }
  }
)

...

导航到列表中的联系人

1 个答案: