库比蒂诺 TabBar 中的圆角

Question

我在我的应用程序中使用 CupertinoTabbar 作为 BottomNavigationBar，现在我需要将左上角和右上角设为圆角，但我找不到如何在任何地方实现它？

我尝试用 ClipRRect 或 Container 包裹它，但它不起作用

这是我的 CupertinoTabbar 代码的样子：

CupertinoTabScaffold(
    backgroundColor: Colors.transparent,
    tabBuilder: (context, index) {
      switch (index) {
        case 0:
          return CupertinoTabView(builder: (context) => const Menu1());
        case 1:
          return CupertinoTabView(builder: (context) => const Menu2());
        case 2:
          return CupertinoTabView(builder: (context) => const Menu3());
        case 3:
          return CupertinoTabView(builder: (context) => const Menu4());

        default:
          return CupertinoTabView(
            builder: (context) => const Scaffold(
              body: Center(
                child: Text("Error"),
              ),
            ),
          );
      }
    },

    // tabBar: InvisibleCupertinoTabBar(),
    tabBar: CupertinoTabBar(
      activeColor: const Color(0xff3B7BBF),
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          label: 'Menu 1',
          icon: Icon(Icons.search),
        ),
        BottomNavigationBarItem(
          label: 'Menu 2',
          icon: Icon(CupertinoIcons.cube_box_fill),
        ),
        BottomNavigationBarItem(
          label: 'Menu 3',
          icon: Icon(CommunityMaterialIcons.truck),
        ),
        BottomNavigationBarItem(
          label: 'Menu 4',
          icon: Icon(Icons.menu),
        ),
      ],
    ),
  );

Answer 1

默认情况下， CupertinoTabScaffold.tabBar 经过严格设计，以匹配本机 iOS 行为。

要覆盖它：

1.创建自定义CupertinoTabController

• CupertinoTabController在库 'package:flutter/src/cupertino/tab_scaffold.dart (via package:flutter/cupertino.dart)'中定义

• 复制包中的代码：flutter/src/cupertino/tab_scaffold.dart

• 粘贴到项目 lib 文件夹中的新文件，在我的例子中为custom_tab_scaffold.dart

• 仅更改以下导入语句：

  导入'包：flutter/foundation.dart'；

  导入'包：flutter/widgets.dart';

  导入'bottom_tab_bar.dart';

  到：

  导入 'package:flutter/cupertino.dart' 隐藏 CupertinoTabBar;

  导入'包：flutter/foundation.dart'；

  导入'包：flutter/widgets.dart';

  导入'./custom_bottom_tab_bar.dart'; //这将替换“bottom_tab_bar.dart”，并将成为下一步中创建的新的自定义 CupertinoTabBar。

2.创建自定义CupertinoTabBar

• CupertinoTabBar在库 'package:flutter/src/cupertino/bottom_tab_bar.dart (via package:flutter/cupertino.dart)'中定义

• 复制包中的代码：flutter/src/cupertino/bottom_tab_bar.dart

• 粘贴到项目 lib 文件夹中的新文件，在我的例子中为custom_bottom_tab_bar.dart

• 在文件中，通过使用具有如下所示的边框半径属性设置的容器包装子行来更新小部件结果：

child: Container(
  decoration: BoxDecoration(
    color: CupertinoDynamicColor.resolve(
      this.backgroundColor ??
          CupertinoTheme.of(context).barBackgroundColor,
      context,
    ),
    borderRadius: BorderRadius.only(
        topLeft: const Radius.circular(30.0),
        topRight: const Radius.circular(30.0)),
  ),
  padding: EdgeInsets.only(bottom: bottomPadding),
  child: Row(
    // Align bottom since we want the labels to be aligned.
    crossAxisAlignment: CrossAxisAlignment.end,
    children: _buildTabItems(context),
  ),
)

• 还将现有的背景颜色属性更新为透明。

final Color backgroundColor = Colors.transparent;

3.更新你的App类

我按原样使用了您的代码，只添加了以下导入语句：

import './custom_bottom_tab_bar.dart';
import './custom_tab_scaffold.dart';
import 'package:flutter/cupertino.dart' hide CupertinoTabBar, CupertinoTabScaffold;