在Flutter中,可以使用BottomAppBar
和FloatingActionButton
来实现凹槽式底部应用栏。下面是一个包含代码示例的解决方法:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Bottom App Bar Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Bottom App Bar Demo'),
),
body: Center(
child: Text('Content'),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// Add your onPressed logic here
},
child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
icon: Icon(Icons.menu),
onPressed: () {
// Add your onPressed logic here
},
),
IconButton(
icon: Icon(Icons.search),
onPressed: () {
// Add your onPressed logic here
},
),
],
),
),
);
}
}
在上面的代码中,Scaffold
组件被用来创建一个页面布局,其中appBar
定义了顶部的应用栏,body
定义了页面的内容,floatingActionButton
定义了浮动操作按钮,bottomNavigationBar
定义了底部的应用栏。
BottomAppBar
的shape
属性被设置为CircularNotchedRectangle()
,以实现凹槽效果。Row
组件被用来放置底部应用栏的两个图标按钮IconButton
。
通过修改onPressed
回调函数,可以在按钮被点击时执行相应的逻辑。
下一篇:AoC第8天问题(Java)