如何在 Flutter 中使用图像图标(来自assets资源)而不是 IconData 和分页 bottomNavigationBar

发布于06月04日

我在我的Flatter项目中使用了bottomNavigationBar.我是Flatter的新手，不知道如何分页，使用assets资源图像图标而不是Iconda.在过go 的两天里，我一直在寻找，但没有得到满意的结果.请帮帮我......

我在这里使用了带有工厂按钮的BottomNavigationBar https://medium.com/coding-with-flutter/flutter-bottomappbar-navigation-with-fab-8b962bb55013个 https://github.com/bizz84/bottom_bar_fab_flutter

我还try 在这里使用自定义图标 https://medium.com/flutterpub/how-to-use-custom-icons-in-flutter-834a079d977个

但没有成功

我只想更改图标，并想知道如何使用分页.我所能做的更改了最后一个分页示例代码.

推荐答案

下面是如何使用assets资源中的图标

ImageIcon(
     AssetImage("images/icon_more.png"),
     color: Color(0xFF3A5A98),
),

在Bot到mNavBar click中try 此示例

因此，您要替换的是Bot到mNavigationBarItem

 new Bot到mNavigationBarItem(
           icon: Icon(Icons.home),
           title: Text('Home'),
         ),

到

 new Bot到mNavigationBarItem(
           icon: ImageIcon(
               AssetImage("images/icon_more.png"),
                    color: Color(0xFF3A5A98),
               ),
           title: Text('Home'),
         ),

您可以从我分享的文章中了解导航

UPDATE个这是您要求的一个例子.

So here the _children variable holds the list of pages that you want 到 navigate based on the selection of Bot到mNavBarItem.

我们的导航方式是，当我们按下选项卡项时，我们使用onTabTaps函数设置它的索引.当索引更改时，视图也会相应更改，正如我们已经指示的那样，Body显示子对象的当前索引


class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;
  final List<Widget> _children = [
    Container(
      color: Colors.red,
    ),
    Container(
      color: Colors.blue,
    ),
    Container(
      color: Colors.green,
    )
  ];

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _children[_currentIndex],
      bot到mNavigationBar: Bot到mNavigationBar(
        onTap: onTabTapped, // new
        currentIndex: _currentIndex, // new
        items: [
          new Bot到mNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          new Bot到mNavigationBarItem(
            icon: Icon(Icons.mail),
            title: Text('Messages'),
          ),
          new Bot到mNavigationBarItem(
              icon: Icon(Icons.person), title: Text('Profile'))
        ],
      ),
    );
  }
}