android - 如何在 Flutter 中“激活”自定义底栏?
问题描述
Flutter 对我来说还不是很自然,希望你们能帮助我。我正在创建一个带有 bottomNavigationBar 的地图应用程序,并且我正在使用一个名为 circular_bottom_navigation 1.0.1 的包来执行此操作,您可以在下面的链接中找到它。
https://pub.dev/packages/circular_bottom_navigation#-readme-tab-
我设法显示了该栏,但有几个问题让我感到沮丧。
我在回调中添加了以下行
CircularBottomNavigationController _navigationController =
new CircularBottomNavigationController(selectedPos);
但我不确定如何使用下一个
// Write a new value
_navigationController.value = 0;
// Read the latest value
int latest = _navigationController.value;
如您所知,该栏尚未激活。
此外,如果您查看屏幕截图,您会注意到地图停在图标的顶部,并且对栏不可见。我希望地图到达栏的顶部,所以图标被覆盖了。
解决方案
import 'dart:async';
import 'package:circular_bottom_navigation/circular_bottom_navigation.dart';
import 'package:circular_bottom_navigation/tab_item.dart';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Google Maps Demo',
home: MapSample(),
);
}
}
class MapSample extends StatefulWidget {
@override
State<MapSample> createState() => MapSampleState();
}
class MapSampleState extends State<MapSample> {
Completer<GoogleMapController> _controller = Completer();
static final CameraPosition _kGooglePlex = CameraPosition(
target: LatLng(37.42796133580664, -122.085749655962),
zoom: 14.4746,
);
List<TabItem> tabItems = List.of([
new TabItem(Icons.home, "Home", Colors.blue, labelStyle: TextStyle(fontWeight: FontWeight.normal)),
new TabItem(Icons.search, "Search", Colors.orange, labelStyle: TextStyle(color: Colors.red, fontWeight: FontWeight.bold)),
new TabItem(Icons.layers, "Reports", Colors.red),
new TabItem(Icons.notifications, "Notifications", Colors.cyan),
]);
static final CameraPosition _kLake = CameraPosition(
bearing: 192.8334901395799,
target: LatLng(37.43296265331129, -122.08832357078792),
tilt: 59.440717697143555,
zoom: 19.151926040649414);
CircularBottomNavigationController _navigationController = new CircularBottomNavigationController(0);
@override
Widget build(BuildContext context) {
return new Scaffold(
body: GoogleMap(
mapType: MapType.hybrid,
initialCameraPosition: _kGooglePlex,
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
},
),
floatingActionButton: FloatingActionButton.extended(
onPressed: _goToTheLake,
label: Text('To the lake!'),
icon: Icon(Icons.directions_boat),
),
extendBody: true,
bottomNavigationBar: CircularBottomNavigation(
tabItems,
controller: _navigationController,
selectedCallback: (int selected) {
_navigationController.value = selected;
},
),
);
}
Future<void> _goToTheLake() async {
final GoogleMapController controller = await _controller.future;
controller.animateCamera(CameraUpdate.newCameraPosition(_kLake));
}
}
您必须将 extendBody: true 传递给 Scaffold
推荐阅读
- python - 总结python中的列表并制作一个新矩阵
- c# - 如何从使用 CryptoJS 加密的字符串中实现 AES 解密?
- laravel - Laravel 集合返回
- templates - xslt 基于默认结构和数据合并 XML
- firebase - 用于预订应用程序的 Firestore 数据建模,便于查询可用性
- python - Python无法识别列表对象
- c - 如何从数组中更改结构指针中的数组值?
- sql - 如何在不使用合并的情况下根据复合键删除重复项
- listview - Xamarin.Forms ListView 具有 2 个不同的选择选项
- javascript - 我如何 JSON.parse 来自 URL 的字符串(React Native)