效果图底部导航栏import package:flutter/material.dart; import package:my_flutter/http/second_page.dart; import first_page.dart; ///底部导航栏 class DemoPage extends StatefulWidget { const DemoPage({super.key}); override StateDemoPage createState() _DemoPageState(); } class _DemoPageState extends StateDemoPage { static const _pageList [FirstPage(),SecondPage()]; var _pageIndex 0; override Widget build(BuildContext context) { return Stack( children: [ _pageList[_pageIndex], //底部导航栏 Positioned( bottom: 40, left: 0, right: 0, child: Center( child: Container( height: 68, width: 221, decoration: BoxDecoration( borderRadius: BorderRadius.circular(45), color: Colors.white, ), child:_pageIndex 0 ? _buildDeviceRow() : _buildMyRow(), ), ) ), ], ); } //设备显示按钮 Widget _buildDeviceRow(){ return Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisSize: MainAxisSize.min, children: [ Container( height: 60, width: 124, margin: EdgeInsets.only(left: 5), decoration: BoxDecoration( borderRadius: BorderRadius.circular(45), gradient: LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [ Color(0xFFA3BCFF), Color(0xFF58E7FD), ] ), ), child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Icon(Icons.device_hub,color: Colors.white,), SizedBox(width: 5,), Text(设备,style: TextStyle(color: Colors.white,fontSize: 18),) ], ), ), GestureDetector( onTap: (){ setState(() { _pageIndex 1; }); }, child: Container( height: 30, width: 30, margin: EdgeInsets.only(right: 35), child: Icon(Icons.radio,color: Colors.blue,), ) ), ], ); } //我的显示按钮 Widget _buildMyRow(){ return Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisSize: MainAxisSize.min, children: [ GestureDetector( onTap: (){ setState(() { _pageIndex 0; }); }, child: Container( height: 30, width: 30, margin: EdgeInsets.only(left: 35), child: Icon(Icons.device_hub,color: Colors.blue,), ), ), Container( height: 60, width: 124, margin: EdgeInsets.only(right: 5), decoration: BoxDecoration( borderRadius: BorderRadius.circular(45), gradient: LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [ Color(0xFFA3BCFF), Color(0xFF58E7FD), ] ), ), child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Text(我的,style: TextStyle(color: Colors.white,fontSize: 18),), SizedBox(width:5 ,), Icon(Icons.radio,color: Colors.white,), ], ), ), ], ); } }两个子页面import package:flutter/material.dart; class FirstPage extends StatefulWidget { const FirstPage({super.key}); override StateStatefulWidget createState() _FirstPageState(); } class _FirstPageState extends StateFirstPage with SingleTickerProviderStateMixin { override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.pink.withOpacity(0.1), body: Center( child: Text(FirstPage), ) ); } } import package:flutter/material.dart; class SecondPage extends StatefulWidget { const SecondPage({super.key}); override StateStatefulWidget createState() _SecondPageState(); } class _SecondPageState extends StateSecondPage with SingleTickerProviderStateMixin { override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.pink.withOpacity(0.1), body: Center( child: Text(SecondPage), ) ); } }