0

アクティブなボトム ナビゲーション バー アイテムが非アクティブなアイテムとは異なる背景を持つ必要があるアプリケーションを作成しています。ヘッダーにラップしてactiveicon、ラベルをnullのままにしてみました。しかし、私は背景と同じ色ではない下の行を持ち続けましたactiveicon. に配置しSizedBoxたり、に設定しようとしましheight: double.infinityたが、うまくいきませんでした。ナビゲーション バーが永続的になるように、Cupertino タブ バーを使用する必要があります。よりシームレスに見えるように、アクティブなアイテムの下の線を削除したいと思います。

私のナビゲーションバーの現在の状態は次のとおりです。 ナビゲーションバー

これに対する解決策を教えていただければ幸いです。それを解決しようとするのに何週間もかかりました。

これが私のコードです

class Nav extends StatelessWidget {
  const Nav({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        backgroundColor: CupertinoTheme.of(context).primaryColor,
        activeColor: Colors.black,
        inactiveColor: Colors.white,
        iconSize: 25,
        items: <BottomNavigationBarItem>[
          _bottomNavigationBarItem(Icons.track_changes, "Track", context),
          _bottomNavigationBarItem(Icons.add_location_sharp, "Create", context),
          _bottomNavigationBarItem(Icons.map_rounded, "Travels", context),
          _bottomNavigationBarItem(Icons.settings, "Settings", context)
        ],
      ),
      tabBuilder: (context, index) {
        switch (index) {
          case 0:
            return CupertinoTabView(builder: (context) {
              return const CupertinoPageScaffold(
                child: TrackPage(),
              );
            });
          case 1:
            return CupertinoTabView(builder: (context) {
              return const CupertinoPageScaffold(
                child: CreatePage(),
              );
            });
          case 2:
            return CupertinoTabView(builder: (context) {
              return const CupertinoPageScaffold(
                child: TravelsPage(),
              );
            });
          case 3:
            return CupertinoTabView(builder: (context) {
              return const CupertinoPageScaffold(
                child: SettingsPage(),
              );
            });
          default:
            return CupertinoTabView(builder: (context) {
              return const CupertinoPageScaffold(
                child: CreatePage(),
              );
            });
        }
      },
    );
  }
}

BottomNavigationBarItem _bottomNavigationBarItem(
    IconData icon, String label, BuildContext context) {
  return BottomNavigationBarItem(
    activeIcon: Container(
      width: double.infinity,
      height: double.infinity,
      color: CupertinoTheme.of(context).primaryContrastingColor,
      padding: const EdgeInsets.only(top: 6.0),
      child: Column(
        children: [
          Expanded(
            child: Icon(icon, color: Colors.black),
          ),
          const SizedBox(height:10),
          Expanded(
            child:
              Text(label, style: const TextStyle(color: Colors.black, fontSize: 12))),
        ],
      )),
    icon: Padding(
      padding: const EdgeInsets.only(top: 6.0),
      child: Column(
        children: [
          Expanded(
            child: Icon(icon),
          ),
          const SizedBox(height:10),
          Expanded(
            child:
              Text(label, style: const TextStyle( fontSize: 12))),
        ],
      ),
    ),
  );
}
4

2 に答える 2

0

この状況を処理するためのパラメーターが見つかりません。ソースコードでハードコーディングされているようです。を使用Transformして操作できますbottomNavigationBar。また、をbottomNavigationBar使用してカスタムを作成し、スタイリングにアクティブ インデックスを使用することもできます。RowColumn

class Nav extends StatelessWidget {
  const Nav({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Transform.translate( //<- this
      offset: const Offset(0, 4),
      child: CupertinoTabScaffold(...
于 2021-11-26T10:28:06.403 に答える