效果图

底部导航栏

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 State<DemoPage> createState() => _DemoPageState(); } class _DemoPageState extends State<DemoPage> { 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 State<StatefulWidget> createState() => _FirstPageState(); } class _FirstPageState extends State<FirstPage> 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 State<StatefulWidget> createState() => _SecondPageState(); } class _SecondPageState extends State<SecondPage> with SingleTickerProviderStateMixin { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.pink.withOpacity(0.1), body: Center( child: Text("SecondPage"), ) ); } }