底部导航栏使用BottomAppBar组件
	底部导航栏除了可以使用BottomNavigationBar固定样式外,还可以自定义导航栏中的按钮
	
	BottomAppBar(
          color:,  底部导航栏颜色  
          shape: CircularNotchedRectangle(),    有缺口的圆形矩阵,用来放置浮动按钮
          child:导航栏内容
        )

效果图:
在这里插入图片描述

代码示例:

import "package:flutter/material.dart";
import "drag.dart";

import 'page/1.dart';
import 'page/2.dart';
import 'page/3.dart';


void main()
{
  runApp(App());
}
class App extends StatelessWidget {
  const App({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return App2();
  }
}

class App2 extends StatefulWidget {
  App2({Key key}) : super(key: key);

  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App2> {

  List _page=[Home3(),Home2(),Home4()];
  int index=0;

  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
      home:Scaffold(
        appBar:AppBar(
          title: Text('小案例'),
        ),
        body:_page[index] ,
        floatingActionButton: FloatingActionButton(
          onPressed: (){},
          tooltip: 'js',
          child: Icon(
            Icons.add,
            color: Colors.white,
          ),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        //不适用固定格式的导航栏
        bottomNavigationBar:BottomAppBar(
          color: Colors.lightBlue,
          //有缺口的圆形矩阵,用来放置浮动按钮
          shape: CircularNotchedRectangle(),
          //导航栏内容
          child: Row(
            mainAxisAlignment:MainAxisAlignment.spaceEvenly,
            //设置内容
            children: <Widget>[
              IconButton(
                icon:Icon(Icons.home),
                color: Colors.white,
                onPressed: (){},
              ),
              IconButton(
                icon:Icon(Icons.category),
                color: Colors.white,
                onPressed: (){},
              ),
          ],),
        )
      ),
      
      //去掉右上角的debug贴纸
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue
      ),
      );
  }
}


class Home extends StatefulWidget {

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {

  Color dragColor=Colors.orange;

  @override
  Widget build(BuildContext context) {
    return Container(
       child: Text('a'),
    );
  }
}








Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐