Flutter---底部导航栏(2)

效果图

底部导航栏

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"),
        )
    );
  }




}