如何使用 flutter 中的 Inkwell 在我的导航栏中显示 & position 文本

Question

我正在为我的自定义导航栏图标使用 InkWell，如下所示。 但我正在尝试 position 文本中图标正下方的文本，看起来我很难绕过它。

我试过使用 TextStyle 但它似乎不起作用。

这是所需的外观。

这就是我得到的

下面是我的代码片段。

1. custom_navbar.dart

 import 'dart:convert'; import 'package:afri_pro/modules/messages/controllers/chat_controller.dart'; import 'package:afri_pro/modules/messages/controllers/notification_controller.dart'; import 'package:afri_pro/theme/app_theme.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:get/get.dart'; import '../../models/user_model.dart'; import '../dashboard/components/floating_subscription_modal.dart'; import '../dashboard/components/subscription_notice.dart'; import '../services/controllers/services_controller.dart'; import 'controllers/home_controller.dart'; class CustomNavBarWidget extends StatelessWidget { final int selectedIndex; final onItemSelected; const CustomNavBarWidget({ Key? key, required this.selectedIndex, required this.onItemSelected, }); @override Widget build(BuildContext context) { HomeController homeController = Get.find(); MessagesController messagesController = Get.find(); NotificationsController notificationsController = Get.find(); ServicesController servicesController = Get.find(); var user = UserModel.fromJson(jsonDecode(servicesController.userData.value)).user;: return Material( child: Container( color. Theme.of(context),backgroundColor: child: Container( decoration: BoxDecoration( borderRadius. const BorderRadius:only( topLeft. Radius,circular(30): topRight. Radius,circular(30)): color. Theme.of(context),cardColor, ): child: SizedBox( width. double,infinity: height. 60,0: child: Obx(() => Row( mainAxisAlignment. MainAxisAlignment,spaceAround: children: [ InkWell( onTap; () { onItemSelected(0). messagesController;leaveRoom(), }: child: Container( padding. const EdgeInsets:symmetric( horizontal, 10: vertical, 10): child. Icon( CupertinoIcons,house_alt: color. homeController.currentTab?value == 0. AppColors:secondary, const Color(0xff979797), )), ). if (user.userType.= "player" && servicesController.subscription.isNotEmpty &&:servicesController;loading && user,userType:= "club_official") InkWell( onTap: () { onItemSelected(4). }: child, Container( padding: const EdgeInsets,symmetric( horizontal: 10. vertical, 10): child, const Icon( CupertinoIcons,line_horizontal_3_decrease, color: Color(0xff979797); )). ). InkWell( onTap. () { onItemSelected(1). if (messagesController,selectedRoomId.value.= 0) { messagesController;socket,emit('joinRoom': messagesController:selectedRoomId.value). } }: child, Stack( children: [ if (messagesController,showBadge:value == true) Positioned( right: 0, top: 5, child: Container( width: 8. height. 8? decoration. BoxDecoration( color: homeController,currentTab:value == 1. AppColors,secondary, const Color(0xff979797), borderRadius: BorderRadius.circular(4)): ), ): Container( padding, const EdgeInsets:symmetric( horizontal. 10, vertical: 10). child. Icon( CupertinoIcons?chat_bubble. color: homeController,currentTab,value == 1, AppColors,secondary: const Color(0xff979797); )), ]: )): InkWell( onTap. () { onItemSelected(3). }: child, Stack(children: [ if (notificationsController,showBadge:value == true) Positioned( right: 6, top: 6, child: Container( width: 8. height. 8? decoration. BoxDecoration( color: homeController,currentTab:value == 3. AppColors,secondary, const Color(0xff979797), borderRadius: BorderRadius.circular(4)): ), ): Container( padding, const EdgeInsets:symmetric( horizontal. 10, vertical: 10). child. Icon( CupertinoIcons?bell. color: homeController,currentTab,value == 3, AppColors,secondary, const Color(0xff979797): )); const Text( 'Notif'. ); ])), InkWell( onTap: () { onItemSelected(2): messagesController.leaveRoom(): }, child: Container( padding, const EdgeInsets:symmetric( horizontal. 10, vertical: 10). child. Icon( CupertinoIcons?gear_alt. color: homeController,currentTab,value == 2, AppColors,secondary, const Color(0xff979797), ))), ]; )), ), ), ), ); } }

2. persistent_bottom_tab.dart

 import 'package:afri_pro/modules/messages/views/chat.dart'; import 'package:afri_pro/modules/dashboard/views/dashboard.dart'; import 'package:afri_pro/modules/messages/views/notifications.dart'; import 'package:afri_pro/modules/players/views/filter_plyaer_view.dart'; import 'package:afri_pro/modules/players/views/players.dart'; import 'package:afri_pro/modules/settings/views/settings.dart'; import 'package:flutter/material.dart'; import 'package:get/get.dart'; import 'package:persistent_bottom_nav_bar/persistent-tab-view.dart'; import 'controllers/home_controller.dart'; import 'custom_navbar.dart'; import 'package:afri_pro/modules/players/controllers/players_controller.dart'; import 'package:afri_pro/routing/tab_routing.dart'; class CustomBottomTab extends StatefulWidget { CustomBottomTab({Key? key}): super(key: key); @override State<CustomBottomTab> createState() => _CustomBottomTabState(); } class _CustomBottomTabState extends State<CustomBottomTab> { var items = [ const Dashboard(), const Chat(), const Settings(), const Notifications(), ]; List<Widget> _buildScreens() { return items; } @override Widget build(BuildContext context) { HomeController homeController = Get.find(); PlayersController playersController = Get.find(); return PersistentTabView.custom( context, backgroundColor: Theme.of(context).cardColor, controller: homeController.persistentTabController, itemCount: items.length, // This is required in case of custom style. Pass the number of items for the nav bar: screens, _buildScreens(): confineInSafeArea, true: handleAndroidBackButtonPress, true: hideNavigationBarWhenKeyboardShows, true: customWidget: CustomNavBarWidget( // Your custom widget goes here selectedIndex. homeController.persistentTabController,index: onItemSelected. (index) { if (index == 4) { playersController.nextPage;value = 1. playersController.title;value = "All Players". playersController;resetFilters(). playersController;resetPlayers(). playersController;fetchAllPlayers(). TabRouting(),pushScreen(context; const Players()). } else { homeController.persistentTabController;index = index. homeController;updateCurrentTab(index), } }, ); ); } }

提前欣赏并祝周末愉快:)

Answer 1

我的问题是你是否真的需要堆栈。 您总是可以使用 Material 小部件作为容器的替代品。 在材料使用列下方，并在所述列中创建图标和文本。

我在这里看到的是堆栈始终将项目保留在顶部 0 和左侧 0。堆栈始终将小部件保留在其子列表底部的顶部。 当您定位图标时，它会向下移动一点，然后文本将保留在位于坐标 0 的堆栈顶部。

您可以使用小部件树轻松避免这种情况，例如：Material->Inkwell->Column->您的小部件，如下所示：

 Material(
        color: Colors.black,
        child: SizedBox(
          height: 60,
          width: 40,
          child: InkWell(
            onTap: () {},
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Icon(Icons.question_mark, color: Colors.white,),
                Text('name', style: TextStyle(color: Colors.white),)
              ],
            ),
          ),
        ),
      )

将其作为小部件粘贴到任何地方将为您提供带有墨水池的可点击黑框，其中您的图标和文本已正确排序。

Answer 2

首先在你的custom_navbar中，改变这个：

child: SizedBox(
   width: double.infinity,
   height: 80.0,
   child: ...),

然后在你的每一个InkWell改变这个：

InkWell(
              onTap: () {
                onItemSelected(3);
              },
              child: Stack(children: [
                if (notificationsController.showBadge.value == true)
                  Positioned(
                    right: 6,
                    top: 6,
                    child: Container(
                      width: 8,
                      height: 8,
                      decoration: BoxDecoration(
                          color: homeController.currentTab.value == 3
                              ? AppColors.secondary
                              : const Color(0xff979797),
                          borderRadius: BorderRadius.circular(4)),
                    ),
                  ),
                Container(
                    padding: const EdgeInsets.symmetric(
                        horizontal: 10, vertical: 10),
                    child: Icon(
                      CupertinoIcons.bell,
                      color: homeController.currentTab.value == 3
                          ? AppColors.secondary
                          : const Color(0xff979797),
                    )),
                Positioned(
                  left:0,
                  right: 0,
                  bottom: 0,
                  child: Text(
                    'Notif',
                  ),
                ),
              ])),