Flutter 添加边距时,底部AppBar CircularNotchedRectangle未居中
我想实现我自己的自定义BottomAppBar,带有圆形中心槽口、圆形边框和边距。 要将边距添加到我的BottomAppBar,我使用容器小部件包装它,并设置边距属性Flutter 添加边距时,底部AppBar CircularNotchedRectangle未居中,flutter,dart,flutter-layout,bottomnavigationview,Flutter,Dart,Flutter Layout,Bottomnavigationview,我想实现我自己的自定义BottomAppBar,带有圆形中心槽口、圆形边框和边距。 要将边距添加到我的BottomAppBar,我使用容器小部件包装它,并设置边距属性margin:EdgeInsets.only(底部:5,左侧:5,右侧:5)。问题是当我这样做时,圆形槽口会向右移动一点 带边距的底部AppBar: 无边距的底部AppBar: 完整代码: import 'package:flutter/material.dart'; void main() => runApp(Exam
margin:EdgeInsets.only(底部:5,左侧:5,右侧:5)
。问题是当我这样做时,圆形槽口会向右移动一点
带边距的底部AppBar:
无边距的底部AppBar:
完整代码:
import 'package:flutter/material.dart';
void main() => runApp(ExampleApp());
class ExampleApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: ExampleScreen(),
);
}
}
class ExampleScreen extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(color: Colors.amber,),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
elevation: 2.0,
),
bottomNavigationBar: BottomNavigationView(),
extendBody: true,
);
}
}
class BottomNavigationView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(bottom: 5, left: 5, right: 5),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(30)),
child: BottomAppBar(
shape: CircularNotchedRectangle(),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
_buildTabItem(),
_buildTabItem()
],
),
),
),
);
}
Widget _buildTabItem() {
return Expanded(
child: SizedBox(
height: 60,
child: Container(
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(height: 24),
Text(''),
],
),
),
),
);
}
}
导入“包装:颤振/材料.省道”;
void main()=>runApp(ExampleApp());
类ExampleApp扩展了无状态小部件{
@凌驾
小部件构建(构建上下文){
返回材料PP(
主页:ExampleScreen(),
);
}
}
类ExampleScreen扩展了无状态小部件{
@凌驾
小部件构建(构建上下文){
返回脚手架(
主体:容器(颜色:Colors.琥珀色,),
floatingActionButtonLocation:floatingActionButtonLocation.centerDocked,
浮动操作按钮:浮动操作按钮(
按下:(){},
子:图标(Icons.add),
标高:2.0,
),
bottomNavigationBar:BottomNavigationView(),
扩展体:是的,
);
}
}
类BottomNavigationView扩展了无状态小部件{
@凌驾
小部件构建(构建上下文){
返回容器(
边距:仅限边集(底部:5,左侧:5,右侧:5),
孩子:ClipRRect(
borderRadius:borderRadius.all(半径圆形(30)),
子项:BottomAppBar(
形状:CircularNotchedRectangle(),
孩子:排(
mainAxisSize:mainAxisSize.max,
mainAxisAlignment:mainAxisAlignment.spaceAround,
儿童:[
_buildTabItem(),
_buildTabItem()
],
),
),
),
);
}
小部件_buildTabItem(){
扩大回报(
孩子:大小盒子(
身高:60,
子:容器(
子:列(
mainAxisSize:mainAxisSize.min,
mainAxisAlignment:mainAxisAlignment.center,
儿童:[
尺寸箱(高度:24),
文本(“”),
],
),
),
),
);
}
}
这是颤振SDK错误还是我的实现方法错误