如何更改 Flutter 底部导航栏上标签的位置？

Question

您好，我有一个底部导航栏，如下所示：click here please

我想做的是改变文本的位置。我的意思是我的图标和我的标签应该并排显示。 (click here to see what I want to do 看起来像一件简单的事情，但我找不到任何事情要做。谢谢

这是我的代码：

PageController _pageController = PageController(
initialPage: 0, ); int currentIndex = 0;
Widget childWidget = ChildWidget(
number: AvailableNumber.First, 
); @override
void dispose() {
_pageController.dispose();
super.dispose(); }
@override
Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: arkaPlan,
  bottomNavigationBar: BottomNavigationBar(
    type: BottomNavigationBarType.shifting,
    selectedItemColor: bottomNavi,
    unselectedItemColor: arkaPlan,
    currentIndex: currentIndex,
    onTap: (value) {
      currentIndex = value;
      _pageController.animateToPage(
        value,
        duration: Duration(milliseconds: 100),
        curve: Curves.linear,
      );

      setState(() {});
    },
    items: [
      BottomNavigationBarItem(
        icon: Icon(LineIcons.home),
        label: 'Home',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.trending_up),
        label: ("Second"),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.dashboard),
        label: ("Third"),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.dashboard),
        label: ("Third"),
      ),
    ],
  ),
  body: PageView(
    controller: _pageController,
    onPageChanged: (page) {
      setState(() {
        currentIndex = page;
      });
    },
    children: <Widget>[
      ChildWidget(number: AvailableNumber.First),
      ChildWidget(number: AvailableNumber.Second),
      ChildWidget(number: AvailableNumber.Third),
      ChildWidget(number: AvailableNumber.Third)
    ],
  ),
);

} }

Answer 1

您可以使用来自 pub.dev 的自定义包或在 BottomNavigationBarItem 中为 icon 使用 Wrap 小部件。

解决方案 1

BottomNavigationBarItem(
  icon: Wrap(
    children: [
      Icon(LineIcons.home),
      Text('Home'),
    ],
  ),
  label: '',
),

解决方案 2

以下是一些自定义包：

Answer 2

您可以使用 Row 而不是 Icon，因为 icon: 要求 Widget 而不是 Icon。所以试试这个：

/// label can't be null, so just set an empty string to label

items: [
      BottomNavigationBarItem(
        icon: Row(children: [
          Icon(Icons.trending_up),
          Text('Home'),
        ],),
        label: '',
      ),
      BottomNavigationBarItem(
        icon: Row(children: [
          Icon(Icons.trending_up),
          Text('second'),
        ],),
        label: '',
      ),
      BottomNavigationBarItem(
        icon: Row(children: [
          Icon(Icons.trending_up),
          Text('third'),
        ],),
        label: '',
      ),
      BottomNavigationBarItem(
        icon: Row(children: [
          Icon(Icons.trending_up),
          Text('test'),
        ],),
        label: '',
      ),
    ],

如何更改 Flutter 底部导航栏上标签的位置？

How can I change the location of the label on Bottom Navigation Bar on the Flutter?

flutter

dart

flutter-bottomnavigation