如何减少抖动中底部导航栏的宽度
我正在尝试设计ui页面，并且使用左右两侧的填充成功地减小了bottomnavigationbar购买的宽度。但是问题是，如果我减少了bottomnavigationbar的with，那么它会在第二个图像（黑色箭头）中的导航栏的每个角处占用空间。在下面，我添加了代码和两个图像，第一个图像是我尝试实现的adobe xd图像，第二个图像是在尝试减小bottomnavigationbar的宽度之后。
class _SettingsState extends State<Settings> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.yellow,
child: ListView(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(
left: 8.0, right: 8.0, top: 65.0),
child: TextField(
decoration: new InputDecoration(
isDense: true,
hintText: "اسمك (اسم صفحتك)",
fillColor: Colors.black,
suffixIcon: Container(
margin: EdgeInsets.only(bottom: 23),
width: 0.1,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
child: Text('تعديل', style: TextStyle(color: Colors.white),),
),
),
keyboardType: TextInputType.text,
style: new TextStyle(color: Colors.black),
),
),
Padding(
padding: const EdgeInsets.only(
left: 8.0, right: 8.0, top: 5.0),
child: TextField(
decoration: new InputDecoration(
isDense: true,
hintText: "التصنيف",
fillColor: Colors.black,
suffixIcon: Container(
margin: EdgeInsets.only(bottom: 23),
width: 0.1,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
child: Text('تعديل', style: TextStyle(color: Colors.white),),
),
),
keyboardType: TextInputType.text,
style: new TextStyle(color: Colors.black),
),
),
Padding(
padding: const EdgeInsets.only(
left: 8.0, right: 8.0, top: 5.0),
child: TextField(
decoration: new InputDecoration(
isDense: true,
hintText: "حساب تويتر",
fillColor: Colors.black,
suffixIcon: Container(
margin: EdgeInsets.only(bottom: 23),
width: 0.1,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
child: Text('تعديل', style: TextStyle(color: Colors.white),),
),
),
keyboardType: TextInputType.number,
style: new TextStyle(color: Colors.black),
),
),
Padding(
padding: const EdgeInsets.only(
left: 8.0, right: 8.0, top: 5.0),
child: TextField(
decoration: new InputDecoration(
hintText: "حساب انستقرام",
isDense: true,
fillColor: Colors.black,
suffixIcon: Container(
margin: EdgeInsets.only(bottom: 23),
width: 0.1,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
child: Text('تعديل', style: TextStyle(color: Colors.white),),
),
),
obscureText: true,
keyboardType: TextInputType.visiblePassword,
style: new TextStyle(color: Colors.black),
),
),
Padding(
padding: const EdgeInsets.only(
left: 8.0, right: 8.0, top: 5.0),
child: TextField(
decoration: new InputDecoration(
hintText: "موقع الكتروني",
isDense: true,
fillColor: Colors.black,
suffixIcon: Container(
margin: EdgeInsets.only(bottom: 23),
width: 0.1,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
child: Text('تعديل', style: TextStyle(color: Colors.white),),
),
),
obscureText: true,
keyboardType: TextInputType.visiblePassword,
style: new TextStyle(color: Colors.black),
),
),
Padding(
padding: const EdgeInsets.only(
left: 8.0, right: 8.0, top: 5.0),
child: TextField(
decoration: new InputDecoration(
hintText: "وصف",
isDense: true,
fillColor: Colors.black,
suffixIcon: Container(
margin: EdgeInsets.only(bottom: 23),
width: 0.1,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
child: Text('تعديل', style: TextStyle(color: Colors.white),),
),
),
obscureText: true,
keyboardType: TextInputType.visiblePassword,
style: new TextStyle(color: Colors.black),
),
),
Padding(
padding: const EdgeInsets.only(top: 25.0,left: 5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text(
'مشاركة صفحتي',
style: TextStyle(
color: Colors.redAccent, fontSize: 18.0,
decoration: TextDecoration.underline,),
),
],
),
),
Padding(
padding: const EdgeInsets.only(top: 30.0),
child: MaterialButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(10.0),
),
minWidth: 280.0,
height: 47.0,
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(builder: (context) => Home1()));
},
textColor: Colors.white,
color: Colors.redAccent,
child: Text(
'تسجيل خروج ',
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 25.0),
),
),
),
],
),
),
bottomNavigationBar: Padding(
padding: const EdgeInsets.only(left: 50.0,right: 50.0),
child: ClipPath(
clipper: ShapeBorderClipper(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topRight: Radius.circular(40),
topLeft: Radius.circular(40)))),
child: BottomNavigationBar(
backgroundColor: Colors.grey[200],
currentIndex: 3,
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.add,color: Colors.grey,size: 35.0,),
title: Text(''),
),
BottomNavigationBarItem(
icon: Icon(Icons.search,color: Colors.grey,size: 35.0,),
title: Text(''),
),
BottomNavigationBarItem(
icon: Icon(Icons.star_border,color: Colors.grey,size: 35.0,),
title: Text(''),
),
BottomNavigationBarItem(
icon: Icon(Icons.person_outline,color: Colors.redAccent,size: 35.0,),
title: Text(''),
),
],
),
),
),
);
}
1 个答案:
答案 0 :(得分：0)
垂直的多余空间是因为Text()小部件。
请尝试在每个BottomNavigationBarItem
替换您的-> title: Text('')
有了--title: Container()
要减少或增加bottomNavigationBar中的左右空间，请像这样更改Padding()的值
Padding(padding: const EdgeInsets.only(left: 10.0,right: 10.0),
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？