我还很陌生, 我用停靠的FAB创建了一个不错的BottomAppBar,但是我也想使用此AppBar进行页面导航。我已经使用BottomNavigationBar进行了尝试,但是随后我失去了停靠的浮动操作按钮。我如何实现导航到底部的应用程序栏?
floatingActionButton: Container(
height: 65.0,
width: 65.0,
child: FittedBox(
child: FloatingActionButton(
onPressed: (){},
child: Icon(Icons.add, color: Colors.white,),
// elevation: 5.0,
),
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
// elevation: 20.0,
shape: CircularNotchedRectangle(),
child: Container(
height: 75,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
iconSize: 30.0,
padding: EdgeInsets.only(left: 28.0),
icon: Icon(Icons.home),
onPressed: () {
setState(() {
currentIndex = 0;
});
},
),
IconButton(
iconSize: 30.0,
padding: EdgeInsets.only(right: 28.0),
icon: Icon(Icons.search),
onPressed: () {
setState(() {
currentIndex = 1;
print("${currentIndex}");
});
},
),
IconButton(
iconSize: 30.0,
padding: EdgeInsets.only(left: 28.0),
icon: Icon(Icons.notifications),
onPressed: () {
setState(() {
currentIndex = 2;
print("${currentIndex}");
});
},
),
IconButton(
iconSize: 30.0,
padding: EdgeInsets.only(right: 28.0),
icon: Icon(Icons.list),
onPressed: () {
setState(() {
currentIndex = 3;
print("${currentIndex}");
});
},
)
],
),
)
)
答案 0 :(得分:1)
您可以使用相同的脚手架为身体使用switch case
-例如tabcontroller
或radiobutton
中的脚手架。
只需在按下bottomAppBar图标时更新主体。
请查看this链接以更好地理解。 :)
答案 1 :(得分:1)
一种实现方式是-PageView
小部件。
带有示例代码BottomAppBar
的示例代码。
class _DemoPageState extends State<FormPage> {
PageController _myPage = PageController(initialPage: 0);
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
child: Container(
height: 75,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
iconSize: 30.0,
padding: EdgeInsets.only(left: 28.0),
icon: Icon(Icons.home),
onPressed: () {
setState(() {
_myPage.jumpToPage(0);
});
},
),
IconButton(
iconSize: 30.0,
padding: EdgeInsets.only(right: 28.0),
icon: Icon(Icons.search),
onPressed: () {
setState(() {
_myPage.jumpToPage(1);
});
},
),
IconButton(
iconSize: 30.0,
padding: EdgeInsets.only(left: 28.0),
icon: Icon(Icons.notifications),
onPressed: () {
setState(() {
_myPage.jumpToPage(2);
});
},
),
IconButton(
iconSize: 30.0,
padding: EdgeInsets.only(right: 28.0),
icon: Icon(Icons.list),
onPressed: () {
setState(() {
_myPage.jumpToPage(3);
});
},
)
],
),
),
),
body: PageView(
controller: _myPage,
onPageChanged: (int) {
print('Page Changes to index $int');
},
children: <Widget>[
Center(
child: Container(
child: Text('Empty Body 0'),
),
),
Center(
child: Container(
child: Text('Empty Body 1'),
),
),
Center(
child: Container(
child: Text('Empty Body 2'),
),
),
Center(
child: Container(
child: Text('Empty Body 3'),
),
)
],
physics: NeverScrollableScrollPhysics(), // Comment this if you need to use Swipe.
),
floatingActionButton: Container(
height: 65.0,
width: 65.0,
child: FittedBox(
child: FloatingActionButton(
onPressed: () {},
child: Icon(
Icons.add,
color: Colors.white,
),
// elevation: 5.0,
),
),
),
);
}
}
答案 2 :(得分:0)
BottomAppBar
和BottomNavigationBar
之间的区别在于,对于最后一个BottomAppBar
和Navigator
,您可以设置要渲染的子级列表(页面),方法是单击下面的图标(onTap方法)。使用(Navigator.of(context).pushName('/yourScreenHere')
,您必须设置一个void SetParameterValues()
{
crReport report = new crReport();
report.SetParameterValue("parameterName1","parameterValue1");
report.SetParameterValue("parameterName2","parameterValue2");
}
方法,以UI / UX的方式进行,我认为这不是很美。
import {
Layoutheader
} from './Layoutheader.jsx';
class MyApp extends React.Component {
render() {
return ( <
div >
<
Layoutheader / >
<
div className = "commentBox" > Hello, world!I am a CommentBox. < /div> < /
div >
);
}
}
ReactDOM.render( < MyApp / > , document.getElementById('container'))
然后,您创建的每个屏幕都可以在其上添加一个AppBar。