如何减少颤振中底部导航栏的宽度

Question

我正在尝试设计 ui 页面，并且使用左侧和右侧的填充成功减少了底部导航栏的宽度。但问题是，如果我减少底部导航栏的宽度，那么它会在第二张图像（黑色箭头）中的导航栏的每个角上占用空间。下面我添加了代码和两个图像，第一个图像是来自 adobe xd 的图像，我试图实现此目的，第二个图像是在尝试减小底部导航栏的宽度之后。\n\n

\n\n

class _SettingsState extends State<Settings> {\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      body: Container(\n        color: Colors.yellow,\n        child: ListView(\n          children: <Widget>[\n            Padding(\n              padding: const EdgeInsets.only(\n                  left: 8.0, right: 8.0, top: 65.0),\n              child: TextField(\n                decoration: new InputDecoration(\n                  isDense: true,\n                  hintText: "\xd8\xa7\xd8\xb3\xd9\x85\xd9\x83 (\xd8\xa7\xd8\xb3\xd9\x85 \xd8\xb5\xd9\x81\xd8\xad\xd8\xaa\xd9\x83)",\n                  fillColor: Colors.black,\n                  suffixIcon: Container(\n                    margin: EdgeInsets.only(bottom: 23),\n                    width: 0.1,\n                    alignment: Alignment.center,\n                    decoration: BoxDecoration(\n                      color: Colors.red,\n                      borderRadius: BorderRadius.circular(10),\n                    ),\n                    child: Text(\'\xd8\xaa\xd8\xb9\xd8\xaf\xd9\x8a\xd9\x84\', style: TextStyle(color: Colors.white),),\n                  ),\n                ),\n                keyboardType: TextInputType.text,\n                style: new TextStyle(color: Colors.black),\n              ),\n            ),\n            Padding(\n              padding: const EdgeInsets.only(\n                  left: 8.0, right: 8.0, top: 5.0),\n              child: TextField(\n                decoration: new InputDecoration(\n                  isDense: true,\n                  hintText: "\xd8\xa7\xd9\x84\xd8\xaa\xd8\xb5\xd9\x86\xd9\x8a\xd9\x81",\n                  fillColor: Colors.black,\n                  suffixIcon: Container(\n                    margin: EdgeInsets.only(bottom: 23),\n                    width: 0.1,\n                    alignment: Alignment.center,\n                    decoration: BoxDecoration(\n                      color: Colors.red,\n                      borderRadius: BorderRadius.circular(10),\n                    ),\n                    child: Text(\'\xd8\xaa\xd8\xb9\xd8\xaf\xd9\x8a\xd9\x84\', style: TextStyle(color: Colors.white),),\n                  ),\n                ),\n                keyboardType: TextInputType.text,\n                style: new TextStyle(color: Colors.black),\n              ),\n            ),\n            Padding(\n              padding: const EdgeInsets.only(\n                  left: 8.0, right: 8.0, top: 5.0),\n              child: TextField(\n                decoration: new InputDecoration(\n                  isDense: true,\n                  hintText: "\xd8\xad\xd8\xb3\xd8\xa7\xd8\xa8 \xd8\xaa\xd9\x88\xd9\x8a\xd8\xaa\xd8\xb1",\n                  fillColor: Colors.black,\n                  suffixIcon: Container(\n                    margin: EdgeInsets.only(bottom: 23),\n                    width: 0.1,\n                    alignment: Alignment.center,\n                    decoration: BoxDecoration(\n                      color: Colors.red,\n                      borderRadius: BorderRadius.circular(10),\n                    ),\n                    child: Text(\'\xd8\xaa\xd8\xb9\xd8\xaf\xd9\x8a\xd9\x84\', style: TextStyle(color: Colors.white),),\n                  ),\n                ),\n                keyboardType: TextInputType.number,\n                style: new TextStyle(color: Colors.black),\n              ),\n            ),\n            Padding(\n              padding: const EdgeInsets.only(\n                  left: 8.0, right: 8.0, top: 5.0),\n              child: TextField(\n                decoration: new InputDecoration(\n                  hintText: "\xd8\xad\xd8\xb3\xd8\xa7\xd8\xa8 \xd8\xa7\xd9\x86\xd8\xb3\xd8\xaa\xd9\x82\xd8\xb1\xd8\xa7\xd9\x85",\n                  isDense: true,\n                  fillColor: Colors.black,\n                  suffixIcon: Container(\n                    margin: EdgeInsets.only(bottom: 23),\n                    width: 0.1,\n                    alignment: Alignment.center,\n                    decoration: BoxDecoration(\n                      color: Colors.red,\n                      borderRadius: BorderRadius.circular(10),\n                    ),\n                    child: Text(\'\xd8\xaa\xd8\xb9\xd8\xaf\xd9\x8a\xd9\x84\', style: TextStyle(color: Colors.white),),\n                  ),\n                ),\n                obscureText: true,\n                keyboardType: TextInputType.visiblePassword,\n                style: new TextStyle(color: Colors.black),\n              ),\n            ),\n            Padding(\n              padding: const EdgeInsets.only(\n                  left: 8.0, right: 8.0, top: 5.0),\n              child: TextField(\n                decoration: new InputDecoration(\n                  hintText: "\xd9\x85\xd9\x88\xd9\x82\xd8\xb9 \xd8\xa7\xd9\x84\xd9\x83\xd8\xaa\xd8\xb1\xd9\x88\xd9\x86\xd9\x8a",\n                  isDense: true,\n                  fillColor: Colors.black,\n                  suffixIcon: Container(\n                    margin: EdgeInsets.only(bottom: 23),\n                    width: 0.1,\n                    alignment: Alignment.center,\n                    decoration: BoxDecoration(\n                      color: Colors.red,\n                      borderRadius: BorderRadius.circular(10),\n                    ),\n                    child: Text(\'\xd8\xaa\xd8\xb9\xd8\xaf\xd9\x8a\xd9\x84\', style: TextStyle(color: Colors.white),),\n                  ),\n                ),\n                obscureText: true,\n                keyboardType: TextInputType.visiblePassword,\n                style: new TextStyle(color: Colors.black),\n              ),\n            ),\n            Padding(\n              padding: const EdgeInsets.only(\n                  left: 8.0, right: 8.0, top: 5.0),\n              child: TextField(\n                decoration: new InputDecoration(\n                  hintText: "\xd9\x88\xd8\xb5\xd9\x81",\n                  isDense: true,\n                  fillColor: Colors.black,\n                  suffixIcon: Container(\n                    margin: EdgeInsets.only(bottom: 23),\n                    width: 0.1,\n                    alignment: Alignment.center,\n                    decoration: BoxDecoration(\n                      color: Colors.red,\n                      borderRadius: BorderRadius.circular(10),\n                    ),\n                    child: Text(\'\xd8\xaa\xd8\xb9\xd8\xaf\xd9\x8a\xd9\x84\', style: TextStyle(color: Colors.white),),\n                  ),\n                ),\n                obscureText: true,\n                keyboardType: TextInputType.visiblePassword,\n                style: new TextStyle(color: Colors.black),\n              ),\n            ),\n            Padding(\n              padding: const EdgeInsets.only(top: 25.0,left: 5.0),\n              child: Row(\n                mainAxisAlignment: MainAxisAlignment.end,\n                children: <Widget>[\n                  Text(\n                    \'\xd9\x85\xd8\xb4\xd8\xa7\xd8\xb1\xd9\x83\xd8\xa9 \xd8\xb5\xd9\x81\xd8\xad\xd8\xaa\xd9\x8a\',\n                    style: TextStyle(\n                      color: Colors.redAccent, fontSize: 18.0,\n                      decoration: TextDecoration.underline,),\n                  ),\n                ],\n              ),\n            ),\n            Padding(\n              padding: const EdgeInsets.only(top: 30.0),\n              child: MaterialButton(\n                shape: new RoundedRectangleBorder(\n                  borderRadius: new BorderRadius.circular(10.0),\n                ),\n                minWidth: 280.0,\n                height: 47.0,\n                onPressed: () {\n                  Navigator.of(context).push(MaterialPageRoute(builder: (context) => Home1()));\n                },\n                textColor: Colors.white,\n                color: Colors.redAccent,\n                child: Text(\n                  \'\xd8\xaa\xd8\xb3\xd8\xac\xd9\x8a\xd9\x84 \xd8\xae\xd8\xb1\xd9\x88\xd8\xac \',\n                  style: TextStyle(\n                      fontWeight: FontWeight.bold, fontSize: 25.0),\n                ),\n              ),\n            ),\n          ],\n        ),\n      ),\n      bottomNavigationBar: Padding(\n        padding: const EdgeInsets.only(left: 50.0,right: 50.0),\n        child: ClipPath(\n          clipper: ShapeBorderClipper(\n              shape: RoundedRectangleBorder(\n                  borderRadius: BorderRadius.only(\n                      topRight: Radius.circular(40),\n                      topLeft: Radius.circular(40)))),\n          child: BottomNavigationBar(\n            backgroundColor: Colors.grey[200],\n            currentIndex: 3,\n            type: BottomNavigationBarType.fixed,\n            items: [\n              BottomNavigationBarItem(\n                icon: Icon(Icons.add,color: Colors.grey,size: 35.0,),\n                title: Text(\'\'),\n              ),\n              BottomNavigationBarItem(\n                icon: Icon(Icons.search,color: Colors.grey,size: 35.0,),\n                title: Text(\'\'),\n              ),\n              BottomNavigationBarItem(\n                icon: Icon(Icons.star_border,color: Colors.grey,size: 35.0,),\n                title: Text(\'\'),\n              ),\n              BottomNavigationBarItem(\n                icon: Icon(Icons.person_outline,color: Colors.redAccent,size: 35.0,),\n                title: Text(\'\'),\n              ),\n            ],\n          ),\n        ),\n      ),\n    );\n  }\n

\n

Answer 1

垂直不需要的空间是因为Text()小部件。

请尝试在每个内部更改此设置BottomNavigationBarItem

替换你的 -->title: Text('')

有了这个-->title: Container()

要减少或增加 中的左右空间，请更改likebottomNavigationBar的值Padding()

Padding(padding: const EdgeInsets.only(left: 10.0,right: 10.0),