在底部导航栏中将“边框半径"和“边框"应用到容器后，如何删除多余的空白? [英] How to remove the extra white space after applying Border Radius and Border to a container in Bottom Navigation bar?

问题描述

我正在用容器创建一个底部导航栏.在将边框半径"和边框"应用到容器后，背景中有这种白色，我正尝试消除这种颜色.我尝试用 Colors.transparent 包装外部Container，但结果保持不变.

I'm creating a Bottom Navigation Bar with Container. After applying Border Radius and Border to the container, there is this white color in the background which I'm trying to eliminate. I tried wrapping the outer Container with Colors.transparent, yet the result remained unchanged.

如何删除背景中的白色?

How can I remove that white color in the background?

class BottomNavigationbar extends StatefulWidget {
  @override
  _BottomNavigationbarState createState() => _BottomNavigationbarState();
}

class _BottomNavigationbarState extends State<BottomNavigationbar> {
  List<Widget> icons = [
    Icon(
      Icons.home,
      color: Colors.black,
    ),
    Icon(
      Icons.person,
      color: Colors.black,
    ),
    Icon(
      Icons.exit_to_app,
      color: Colors.black,
    )
  ];
  List<Widget> pages = List.generate(3, (index) => Foo("Page : ${index + 1}"));
  int currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: icons.length,
      child: Scaffold(
          backgroundColor: Colors.transparent,
          bottomNavigationBar: Container(
            height: 55,
            child: Container(
              decoration: BoxDecoration(
                  border: Border.all(color: Color(0xFFF38B6FF), width: 2),
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(20),
                      topRight: Radius.circular(20)),
                  color: Colors.transparent),
              child: TabBar(
                tabs: List.generate(
                    icons.length,
                    (int index) => Tab(
                          icon: icons[index],
                        )),
              ),
            ),
          ),
          body: TabBarView(
            children: [
              new Container(
                color: Colors.yellow,
              ),
              new Container(
                color: Colors.orange,
              ),
              new Container(
                color: Colors.lightGreen,
              ),
            ],
          )),
    );
  }
}

class Foo extends StatelessWidget {
  final String text;
  Foo(this.text);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Text(text),
    ));
  }
}

推荐答案

设置 Scaffold 的 extendBody 属性设置为true，并将NavigationBar Container 的颜色设置为白色.

Set extendBody property of Scaffold to true and set the navigationBar Container color to white.

Scaffold(
  extendBody: true,
  //other code
)

和

BoxDecoration(
  color: Colors.white,
  border: Border.all(color: Color(0xFFF38B6FF), width: 2),
  //other code
)

这篇关于在底部导航栏中将“边框半径"和“边框"应用到容器后，如何删除多余的空白?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！