html 底部导航栏中间凸起效果源码,flutter 底部bottomNavigationBar凸起效果

最新推荐文章于 2025-05-02 09:55:53 发布

田智广

最新推荐文章于 2025-05-02 09:55:53 发布

阅读量443

点赞数

文章标签： html 底部导航栏中间凸起效果源码

此博客介绍了KBHome2页面组件，展示了一个使用PageView和BottomAppBar实现的动态页面切换，包括随机单词、电影评论、登录页面和自定义组件。通过PageController控制页面动画和底部导航栏的交互设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import 'package:flutter/material.dart';

import'package:flutter_app/src/pages/KBRandomWords.dart';

import"package:flutter_app/src/pages/KBWidgetPage.dart";

import'kb_movie_review.dart';

import'KBLoginPage.dart';

import'src/widgets/cookbook/SnackBarDemo.dart';

class KBHome2 extends StatefulWidget {

@override

StatecreateState() {return_KBHomeState2();

}

class _KBHomeState2 extends State{int _currentIndex = 0;

List_pages;

@overridevoidinitState() {

super.initState();

print("Home InitStatus");

_pages=[newRandomWords(

key: Key("random"),

),new KBMovieReview(key: Key("movie")),newKBLoginPage(),newKBWidgetPage(

key: Key("widget"),

];

}

@overridevoiddispose() {

super.dispose();

_pageController.dispose();

}var _pageController = PageController(initialPage: 0);

@override

Widget build(BuildContext context) {returnScaffold(

appBar: AppBar(

title: Text("测试抽屉"),

),//body: _pages[_currentIndex], // 只是这样写会导致在每次切换的时候都rebuild 子控件

body: PageView.builder(

controller: _pageController,

onPageChanged: _pageChanged,

itemCount: _pages.length,

itemBuilder: (context, index)=>_pages[index]),

floatingActionButton: FloatingActionButton(

onPressed: () {},

child: Icon(

Icons.add,

color: Colors.white,

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

bottomNavigationBar: BottomAppBar(

color: Colors.red,

shape: CircularNotchedRectangle(),

child: Padding(

padding: EdgeInsets.fromLTRB(0, 6, 0, 6),

child: Row(

mainAxisSize: MainAxisSize.max,

mainAxisAlignment: MainAxisAlignment.spaceAround,

children:[

GestureDetector(

onTap: () {

onTap(0);

child: Column(

mainAxisSize: MainAxisSize.min,

children:[

Icon(Icons.home, color: getColor(0)),

Text("首页", style: TextStyle(color: getColor(0)))

)),

GestureDetector(

onTap: () {

onTap(1);

child: Column(

mainAxisSize: MainAxisSize.min,

children:[

Icon(Icons.forum, color: getColor(1)),

Text("论坛", style: TextStyle(color: getColor(1)))

)),

Column(

mainAxisSize: MainAxisSize.min,

children:[

Icon(

Icons.home,

color: Colors.transparent,

Text("发布", style: TextStyle(color: Color(0xFFEEEEEE)))

GestureDetector(

onTap: () {

onTap(2);

child: Column(

mainAxisSize: MainAxisSize.min,

children:[

Icon(Icons.mail, color: getColor(2)),

Text("消息", style: TextStyle(color: getColor(2)))

)),

GestureDetector(

onTap: () {

onTap(3);

child: Column(

mainAxisSize: MainAxisSize.min,

children:[

Icon(Icons.person, color: getColor(3)),

Text("我的", style: TextStyle(color: getColor(3)))

))

);

}

Color getColor(intvalue) {return this._currentIndex == value ? Theme.of(context).cardColor : Color(0XFFBBBBBB);

}void _pageChanged(intindex) {

setState(() {if (_currentIndex != index) _currentIndex =index;

});

}void onTap(intindex) {//_pageController.jumpToPage(index);

_pageController.animateToPage(index,

duration: const Duration(milliseconds:100), curve: Curves.easeOutSine);

}