如何在Flutter中裁剪选项卡栏容器的边缘?

huangapple go评论84阅读模式
英文:

How do I clip the edges of my tab bar container in flutter?

问题

我屏幕底部有一个容器,其中包含一个BottomNavigationBar。我希望该容器的颜色与我的背景颜色相同。即使添加了CLipRRect,它仍然没有得到修正。我还尝试使容器透明,但它显示了一个错误,我无法为容器分配颜色并为其提供一个boxDecoration。我希望多余的白色部分能融入我的背景。

如何去掉背景的阴影?

Widget _bottomNavigationBar(int selectedIndex) => ClipRect(
  child: Container(
    height: 80,
    decoration: BoxDecoration(
      borderRadius: const BorderRadius.all(Radius.circular(52.0)),
      boxShadow: <BoxShadow>[
        BoxShadow(
          color: Colors.grey.withOpacity(0.3),
          offset: const Offset(0.0, 0.0),
          blurRadius: 52.0,
        ),
      ],
    ),
    child: ClipRRect(
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(52.0),
        topRight: Radius.circular(52.0),
      ),
      child: BottomNavigationBar(
        selectedItemColor: Color(0xFFFE524B),
        unselectedItemColor: Color(0xFFFF8C3B),
        onTap: (int index) => setState(() => _selectedIndex = index),
        currentIndex: selectedIndex,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(
              Entypo.home,
              size: 30,
            ),
            title: Text(''),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Entypo.game_controller,
              size: 30,
            ),
            title: Text(''),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Entypo.wallet,
              size: 30,
            ),
            title: Text(''),
          ),
        ],
      ),
    ),
  ),
);

希望这对你有帮助!

英文:

I have a container at the bottom of my screen that has a BottomNavigationBar. I want the container to get the colour of my background. Even after adding CLipRRect it wasn't getting corrected. I also tried to make the container transparent but it showed me an error where I couldn't assign a colour to my container and give it a boxDecoration.I want the excess white part to merge into my background.

//edited

How do I get rid of the shadow from the background?
如何在Flutter中裁剪选项卡栏容器的边缘?

Widget _bottomNavigationBar(int selectedIndex) =&gt; ClipRect(
    child: Container(
        height: 80,
        decoration: BoxDecoration(
          borderRadius: const BorderRadius.all(Radius.circular(52.0)),
          boxShadow: &lt;BoxShadow&gt;[
            BoxShadow(
                color: Colors.grey.withOpacity(0.3),
                offset: const Offset(0.0, 0.0),
                blurRadius: 52.0),
          ],
        ),
        child: ClipRRect(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(52.0),
              topRight: Radius.circular(52.0)),
          child: BottomNavigationBar(
            selectedItemColor: Color(0xFFFE524B),
            unselectedItemColor: Color(0xFFFF8C3B),
            onTap: (int index) =&gt; setState(() =&gt; _selectedIndex = index),
            currentIndex: selectedIndex,
            items: const &lt;BottomNavigationBarItem&gt;[
              BottomNavigationBarItem(
                  icon: Icon(
                    Entypo.home,
                    size: 30,
                  ),
                  title: Text(&#39;&#39;)),
              BottomNavigationBarItem(
                  icon: Icon(
                    Entypo.game_controller,
                    size: 30,
                  ),
                  title: Text(&#39;[![enter image description here][1]][1]&#39;)),
              BottomNavigationBarItem(
                  icon: Icon(
                    Entypo.wallet,
                    size: 30,
                  ),
                  title: Text(&#39;&#39;)),
            ],
          ),
        )),
  );

答案1

得分: 4

这实际上与底部导航栏无关。您需要将"extendBody"设置为"true"以用于父Scaffold小部件。这将使Scaffold的主体内容一直延伸到屏幕底部!

Scaffold(
  extendBody: true,
  bottomNavigationBar: _bottomNavigationBar(selectedIndex),
);
英文:

This is actually not a problem with the bottom navigation bar. You need to set "extendBody" to "true" for the parent Scaffold widget. This will extend the scaffold body content all the way down to the bottom of the screen!

Scaffold(
  extendBody: true,
  bottomNavigationBar: _bottomNavigationBar(selectedIndex),
);

huangapple
  • 本文由 发表于 2020年1月3日 21:58:35
  • 转载请务必保留本文链接:https://go.coder-hub.com/59579849.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定