0

您好,我有一个底部导航栏,如下所示:请单击此处

我想要做的是改变文本的位置。我的意思是我的图标和我的标签应该看起来并排。(单击此处查看我想做的事情 看起来很简单,但我找不到任何事情要做。谢谢

这是我的代码:

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)
    ],
  ),
);

} }

4

2 回答 2

1

您可以使用 aRow而不是Icon因为icon:要求 aWidget而不是 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: '',
      ),
    ],
于 2021-07-14T15:19:28.433 回答
0

您可以使用来自 pub.dev 的自定义包使用Wrap小部件 for iconin BottomNavigationBarItem

解决方案 1

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

解决方案 2

以下是一些自定义包:

于 2021-07-14T15:16:33.843 回答