CupertinoTabBar中的圆角

萨多贝克

我在我的应用程序中将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),
        ),
      ],
    ),
  );

最潮

该CupertinoTabScaffold.tabBar，默认情况下，它是专门为匹配机iOS行为。

要覆盖它：

1，创建一个自定义的CupertinoTabController

CupertinoTabController在库“ package：flutter / src / cupertino / tab_scaffold.dart（通过package：flutter / cupertino.dart）”中定义
将代码复制到package：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（通过package：flutter / cupertino.dart）”中定义
复制以下软件包中的代码：Flutter / src / cupertino / bottom_tab_bar.dart
粘贴到项目lib文件夹中的新文件，在我的情况下为custom_bottom_tab_bar.dart
在文件中，通过用设置了边框半径属性的容器包装子行来更新Widget结果，如下所示：

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语句：

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

希望对您有所帮助。

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

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