Flutter BottomNavigationBar 实现反馈

Question

这是我的底部导航栏

我想要它看起来像这样

我的手机底座有圆角

我正在开发一个 Flutter 应用程序，刚刚使用自定义

BottomNavigationBar

实现了

AppBar

。以下是我的

HomePage

小部件的代码：

import 'package:flutter/material.dart';
import 'dart:ui'; // For ImageFilter.blur

import 'screens/profile.dart';
import 'home_screen.dart';
import 'book_appointment.dart';
import 'screens/history.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _bottomNavIndex = 0;

  final List<Widget> _pages = [
    HomeScreen(),
    AppointmentPage(),
    HistoryPage(),
  ];

  final List<IconData> _iconList = [
    Icons.home_filled,
    Icons.add_rounded,
    Icons.history,
  ];

  final List<String> _titleList = [
    'Home',
    'Appointments',
    'History',
  ];

  PreferredSizeWidget? _buildAppBar() {
    if (_bottomNavIndex == 0) {
      return PreferredSize(
        preferredSize: Size.fromHeight(60),
        child: AppBar(
          backgroundColor: Colors.transparent,
          flexibleSpace: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/appbar.png'),
                fit: BoxFit.cover,
              ),
            ),
          ),
          title: GestureDetector(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => ProfilePage()),
              );
            },
            child: Row(
              children: [
                Padding(
                  padding: EdgeInsets.only(top: 10),
                  child: CircleAvatar(
                    backgroundImage: AssetImage('assets/pogisivenz.png'),
                    radius: 20,
                  ),
                ),
                SizedBox(width: 10),
                Text(
                  'Hi, Harold Pogi',
                  style: TextStyle(color: Color(0xFFE5D9F2)),
                ),
              ],
            ),
          ),
        ),
      );
    }
    return null;
  }

  Widget _buildBottomNavigationBar() {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white, // Background color for the dock
        borderRadius: BorderRadius.vertical(
          top: Radius.circular(30), // Rounded corners at the top
        ),
        boxShadow: [
          BoxShadow(color: Colors.black38, spreadRadius: 0, blurRadius: 10),
        ],
      ),
      margin: const EdgeInsets.only(bottom: 20.0), // Margin for the floating effect
      child: ClipRRect(
        borderRadius: BorderRadius.vertical(
          top: Radius.circular(30), // Match the top rounded corners
        ),
        child: BottomNavigationBar(
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(_iconList[0]),
              label: _titleList[0],
            ),
            BottomNavigationBarItem(
              icon: Icon(_iconList[1]),
              label: _titleList[1],
            ),
            BottomNavigationBarItem(
              icon: Icon(_iconList[2]),
              label: _titleList[2],
            ),
          ],
          currentIndex: _bottomNavIndex,
          selectedItemColor: const Color.fromARGB(255, 116, 23, 133),
          unselectedItemColor: Colors.black,
          onTap: (index) {
            setState(() {
              _bottomNavIndex = index;
            });
          },
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent, // Make Scaffold background transparent
      appBar: _buildAppBar(),
      body: Stack(
        children: [
          Positioned.fill(
            child: Image.asset(
              'assets/splash.png',
              fit: BoxFit.cover,
            ),
          ),
          Positioned.fill(
            child: AnimatedSwitcher(
              duration: Duration(milliseconds: 300),
              child: _pages[_bottomNavIndex],
            ),
          ),
        ],
      ),
      bottomNavigationBar: _buildBottomNavigationBar(),
    );
  }
}

我多次尝试自己更改它，但它不起作用，请帮忙

Answer 1

您的代码中有一些错误：

1. 您使用

   BorderRadius.vertical

   代替

   BorderRadius.all

   或

   BorderRadius.circular

   ，垂直的只会将您的顶角变圆，否则

   all

   和

   circular

   会将所有角变圆。
2. 如果您使用

   Container

   来圆角，则无需再次使用

   ClipRRect

   ，因为

   Container

   已经有一个名为

   clipBehavior

   的属性。

将您的

_buildBottomNavigationBar()

更改为这个，希望它能满足您的需求。

Widget _buildBottomNavigationBar() {
    return Container(
      decoration: const BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(20)),
        boxShadow: [
          BoxShadow(color: Colors.black38, spreadRadius: 0, blurRadius: 10),
        ],
      ),
      // Add [Clip.hardEdge] to [Container] so the child will forced
      // to implement the [Container] decoration.
      clipBehavior: Clip.hardEdge,
      // Add all side margin just like iphone dock.
      margin: const EdgeInsets.all(20.0),
      child: BottomNavigationBar(
        // [backgroundColor] is the properties to set
        // [BottomNavigationBar] background.
        backgroundColor: Colors.white,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(TestPage._iconList[0]),
            label: TestPage._titleList[0],
          ),
          BottomNavigationBarItem(
            icon: Icon(TestPage._iconList[1]),
            label: TestPage._titleList[1],
          ),
          BottomNavigationBarItem(
            icon: Icon(TestPage._iconList[2]),
            label: TestPage._titleList[2],
          ),
        ],
        currentIndex: _bottomNavIndex,
        selectedItemColor: const Color.fromARGB(255, 116, 23, 133),
        unselectedItemColor: Colors.black,
        onTap: (index) {
          _bottomNavIndex = index;
          setState(() {});
        },
      ),
    );
  }

输出