底部不规则导航栏2

Posted pp-pping

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了底部不规则导航栏2相关的知识，希望对你有一定的参考价值。

代码1：

动态布局基础文件

import ‘package:flutter/material.dart‘;
class EveryPage extends StatefulWidget {
String _title;
EveryPage(this._title);
@override
_EveryPageState createState() => _EveryPageState();
}

class _EveryPageState extends State<EveryPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(widget._title),),
body: Center(
child: Text(widget._title),
),
);
}
}
代码2：实现内容
import ‘package:flutter/material.dart‘;
import ‘every_page.dart‘;
class BottomAppBarDemo extends StatefulWidget {


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

class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
List<Widget> _everyPage;
int _index = 0;
@override
void initState(){
_everyPage = List();
_everyPage..add(EveryPage(‘hone‘))..add(EveryPage(‘Email‘));
super.initState();
}
@override
Widget build(BuildContext context) {
 
return Scaffold(
body: _everyPage[_index],
floatingActionButton: FloatingActionButton(
onPressed: (){
Navigator.of(context).push(
MaterialPageRoute(builder: (BuildContext context){
return EveryPage(‘Photo‘);
})
);
},
tooltip: ‘创建‘,
child: Icon(
Icons.add_a_photo,
color: Colors.white,
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
color: Colors.orange,
shape: CircularNotchedRectangle(),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
IconButton(
icon: Icon(Icons.home),
 
color: Colors.white,
 
onPressed: (){
setState(() {
_index = 0;
});
},
), IconButton(
icon: Icon(Icons.hotel),
color: Colors.white,
onPressed: (){
setState(() {
_index = 1;
});
},
)
],
),
),
);
}
}
总结：
 

不规则底部导航栏2

 

创建动态widget

class 类名 extends StatefulWidget {

  String _title;

  EveryPage(this._title);

  @override

  _EveryPageState createState() => _EveryPageState();

}

class _EveryPageState extends State<EveryPage> {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(title: Text(widget._title),),//此处的widget 应该是一个内置对象获得上面的类对象

      body: Center(

        child: Text(widget._title),

      ),

    );

  }

重写State

List<widget> _集合对象1；

Void initState(){

_集合对象1 = List();

_集合对象1..add（类名(参数)）//返回的还是集合 等于 list = [list add:xxx];

 

}

 

IconButton(

onpressed:()

setState((

_index =xx;//改变状态索引

))

{}

 

)

body: _everyPage[_index],//内容对象，根据按钮的索引改变 改变布局内容

 

 

以上是关于底部不规则导航栏2的主要内容，如果未能解决你的问题，请参考以下文章

微信h5滑动隐藏底部导航栏

Android底部导航栏

2 android中的导航栏（顶部和底部）

android底部导航栏

android底部导航栏

小程序自定义底部导航缓存