如何在 Flutter 中“激活”自定义底栏?

安德鲁·史蒂文森

Flutter 对我来说还不是很自然,希望你们能帮助我。我正在创建一个带有底部导航栏的地图应用程序,我正在使用一个名为 circle_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

在此处输入图片说明

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在Flutter中自定义标签栏宽度?

如何在Flutter中实现自定义应用栏布局可滚动效果

如何在Flutter中制作自定义底部导航栏

如何在Flutter中动态隐藏和显示底栏

如何在Flutter中自定义DropdownButtons和DropdownMenuItems?

如何在Flutter中播放自定义声音?

如何在Flutter中设置自定义FontWeight值

如何在Flutter中实现自定义形状的容器

如何在Flutter Web中添加自定义字体?

如何在 Flutter 中自定义 Slider 小部件?

如何在Flutter中创建自定义日历

如何在Flutter中创建自定义列表?

如何在Flutter中制作自定义按钮形状

如何在Flutter中实现自定义窗口?

如何在 Flutter 中设计这样的自定义 JoystickView?

如何在 Flutter 中制作自定义圆

如何在 Flutter 中制作自定义形状容器?

如何在 Flutter 中制作自定义椭圆

如何在Flutter中针对不同屏幕尺寸在自定义类中设置应用栏的高度?

Flutter如何制作自定义标签栏?

如何在 Flutter 中使用自定义应用栏和图像创建 SliverAppBar?

如何在Flutter中使用自定义Clipper制作弯曲的应用栏

Flutter Cards:如何在Flutter中创建自定义卡片小部件

如何在Flutter中定义自定义文本主题?

如何在Flutter上设置自定义高程颜色?

如何在Flutter中使用自定义字体样式?

如何在 Flutter 中正确扩展自定义 Provider

如何在使用 SearchDelegate Flutter 时自定义 appBar

如何在Flutter中的GridView中为窗口小部件设置自定义高度?