如何为底部划分bar设置约束箱|扑

发布于 2025-01-26 23:23:14 字数 457 浏览 3 评论 0原文

我试图使用以下方式设置一个bottomNavigationBar：

ConstrainedBox(
  constraints: const BoxConstraints(maxWidth: 500),
  child: // child (Two buttons, occupying each ~40% of the total width
)

但是当我这样做时，bottom bottomNavigationbar占据显示的完整宽度（iPad pro 11''），而我仅使用是否希望此底部范围占用这么多空间（少于500），

有人知道有什么问题吗？我有这个Boxted Box的身体，没有问题，

谢谢！ :)

原文

I was trying to setup a bottomNavigationBar with:

ConstrainedBox(
  constraints: const BoxConstraints(maxWidth: 500),
  child: // child (Two buttons, occupying each ~40% of the total width
)

But when I do this, the bottomNavigationBar takes the full width of the display (an iPad Pro 11''), and I only want this bottomNavigationBar to take so much space (less than 500)

Anyone knows what's the problem?
I have this ConstrainedBox for the body and there's no issue

Thanks! :)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

柠檬 2025-02-02 23:23:14

如果显示尺寸大于500，则以下示例将“ bottomnavigationbar”将“ bottomnavigationbar”限制为500，否则将占据屏幕的完整尺寸。

  bottomNavigationBar: Row(
    children: [
      Spacer(),
      ConstrainedBox(
        constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width >= 500 ? 500 : MediaQuery.of(context).size.width),
        child: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.business),
              label: 'Business',
            ),
          ],
        ),
      ),
      Spacer()
    ],
  ),

the following example will constrain the ´bottomNavigationBar´ to 500 if the display size is bigger than 500, otherwise it will take the full size of the screen.

  bottomNavigationBar: Row(
    children: [
      Spacer(),
      ConstrainedBox(
        constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width >= 500 ? 500 : MediaQuery.of(context).size.width),
        child: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.business),
              label: 'Business',
            ),
          ],
        ),
      ),
      Spacer()
    ],
  ),

回复收藏 0 原文

~没有更多了~