问题

如何在Flutter中创建这种类型的选项卡栏？

答案1

得分: 2

你可以使用这个包：curved_navigation_bar

CurvedNavigationBar(
backgroundColor: Colors.blueAccent,
items: [
Icon(Icons.add, size: 30),
Icon(Icons.list, size: 30),
Icon(Icons.compare_arrows, size: 30),
],
onTap: (index) {
// 处理按钮点击事件
},
)

CurvedNavigationBar(
    backgroundColor: Colors.blueAccent,
    items: <Widget>[
      Icon(Icons.add, size: 30),
      Icon(Icons.list, size: 30),
      Icon(Icons.compare_arrows, size: 30),
    ],
    onTap: (index) {
      //Handle button tap
    },
  )

答案2

得分: 2

> 您可以尝试这些依赖项：stylish_bottom_bar: ^1.0.3

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:stylish_bottom_bar/model/bar_items.dart';
import 'package:stylish_bottom_bar/stylish_bottom_bar.dart';

class TabbarScreen extends StatefulWidget {
  const TabbarScreen({super.key});

  @override
  State<TabbarScreen> createState() => _TabbarScreenState();
}

class _TabbarScreenState extends State<TabbarScreen> {
  dynamic selected;
  var heart = false;
  PageController controller = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: StylishBottomBar(
        option: AnimatedBarOptions(
          barAnimation: BarAnimation.fade,
          iconStyle: IconStyle.animated,
        ),
        items: [
          BottomBarItem(
            icon: const Icon(
              Icons.chat_bubble_outline,
            ),
            selectedIcon: const Icon(Icons.chat),
            selectedColor: Colors.teal,
            backgroundColor: Colors.teal,
            title: const Text('Chat'),
          ),
          BottomBarItem(
            icon: const Icon(Icons.list),
            selectedIcon: const Icon(Icons.list),
            selectedColor: Colors.red,
            title: const Text('List'),
          ),
          BottomBarItem(
            icon: const Icon(
              Icons.person_outline,
            ),
            selectedIcon: const Icon(
              Icons.person,
            ),
            backgroundColor: Colors.purpleAccent,
            selectedColor: Colors.deepPurple,
            title: const Text('Profile'),
          ),
        ],
        hasNotch: true,
        fabLocation: StylishBarFabLocation.end,
        currentIndex: selected ?? 0,
        onTap: (index) {
          controller.jumpToPage(index);
          setState(() {
            selected = index;
          });
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            heart = !heart;
          });
        },
        backgroundColor: Colors.white,
        child: Icon(
          heart ? CupertinoIcons.add_circled_solid : CupertinoIcons.add,
          color: Colors.red,
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
      body: SafeArea(
        child: PageView(
          controller: controller,
          children: const [
            Center(child: Text('Chat')),
            Center(child: Text('List')),
            Center(child: Text('Profile')),
          ],
        ),
      ),
    );
  }
}

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:stylish_bottom_bar/model/bar_items.dart';
import 'package:stylish_bottom_bar/stylish_bottom_bar.dart';
class TabbarScreen extends StatefulWidget {
const TabbarScreen({super.key});
@override
State<TabbarScreen> createState() => _TabbarScreenState();
}
class _TabbarScreenState extends State<TabbarScreen> {
dynamic selected;
var heart = false;
PageController controller = PageController();
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: StylishBottomBar(
option: AnimatedBarOptions(
barAnimation: BarAnimation.fade,
iconStyle: IconStyle.animated,
),
items: [
BottomBarItem(
icon: const Icon(
Icons.chat_bubble_outline,
),
selectedIcon: const Icon(Icons.chat),
selectedColor: Colors.teal,
backgroundColor: Colors.teal,
title: const Text('Chat'),
),
BottomBarItem(
icon: const Icon(Icons.list),
selectedIcon: const Icon(Icons.list),
selectedColor: Colors.red,
title: const Text('List'),
),
BottomBarItem(
icon: const Icon(
Icons.person_outline,
),
selectedIcon: const Icon(
Icons.person,
),
backgroundColor: Colors.purpleAccent,
selectedColor: Colors.deepPurple,
title: const Text('Profile')),
],
hasNotch: true,
fabLocation: StylishBarFabLocation.end,
currentIndex: selected ?? 0,
onTap: (index) {
controller.jumpToPage(index);
setState(() {
selected = index;
});
},
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
heart = !heart;
});
},
backgroundColor: Colors.white,
child: Icon(
heart ? CupertinoIcons.add_circled_solid : CupertinoIcons.add,
color: Colors.red,
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
body: SafeArea(
child: PageView(
controller: controller,
children: const [
Center(child: Text('Chat')),
Center(child: Text('List')),
Center(child: Text('Profile')),
],
),
),
);
}
}