flutter - CupertinoTabBar 中的圆角

Question

我在我的应用程序中使用 CupertinoTabbar 作为 BottomNavigationBar，现在我需要使 topLeft 和 topRight 角变圆，但我找不到如何在任何地方制作它？
我试图用 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 ，默认情况下，严格设计为匹配 native 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

仅更改导入语句:
导入 'package:flutter/foundation.dart';
导入 'package:flutter/widgets.dart';
导入 'bottom_tab_bar.dart';
到:
导入 'package:flutter/cupertino.dart' 隐藏 CupertinoTabBar；
导入 'package:flutter/foundation.dart';
导入 'package: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.更新你的应用类
我按原样使用了您的代码，仅添加了以下导入语句:

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