如何在 Flutter 中“激活”自定义底栏？答案

【问题标题】：How do I "activate" a custom bottom bar in Flutter?如何在 Flutter 中“激活”自定义底栏？
【发布时间】：2019-10-18 14:14:50
【问题描述】：

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;

如您所知，该栏尚未激活。

此外，如果您看一下屏幕截图，您会注意到地图停在图标的顶部，并且对栏不可见。我希望地图到达栏的顶部，所以图标被覆盖了。

【问题讨论】：

标签： android flutter dart navigation bottomnavigationview

【解决方案1】：

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

【讨论】：

非常感谢凯文。那是一种享受。我现在要做的就是浏览页面，我很高兴。再次感谢。