如何在 Flutter 中使用图像图标(来自资产)代替 IconData 和分页 bottomNavigationBar
How to use image icon (from assets) instead of IconData and pagination bottomNavigationBar in Flutter
我在我的 flutter 项目中使用 bottomNavigationBar 我是 flutter 的新手,我不知道分页和使用资产图像图标而不是 iconData。我搜索了过去 2 天,但没有得到满意的结果。请帮帮我......
我在此处使用了 bottomNavigationBar 和一个很棒的按钮
https://medium.com/coding-with-flutter/flutter-bottomappbar-navigation-with-fab-8b962bb55013
https://github.com/bizz84/bottom_bar_fab_flutter
我也尝试使用这里的自定义图标
https://medium.com/flutterpub/how-to-use-custom-icons-in-flutter-834a079d977
但没有成功
我只是想换个图标,想知道分页怎么用。我可以对最后一个分页示例代码进行更改。
以下是如何使用资产中的图标
ImageIcon(
AssetImage("images/icon_more.png"),
color: Color(0xFF3A5A98),
),
为 BottomNavBar 尝试此示例 click
所以你要替换的是 BottomNavigationBarItem
new BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
到
new BottomNavigationBarItem(
icon: ImageIcon(
AssetImage("images/icon_more.png"),
color: Color(0xFF3A5A98),
),
title: Text('Home'),
),
你可以从我分享的文章中了解导航
更新
这是您要求的示例。
所以这里的 _children 变量包含您要根据 BottomNavBarItem 的选择进行导航的页面列表。
我们的导航方式是,当我们按下一个选项卡项时,我们使用 onTabTapped 函数设置它的索引。当索引更改时,视图会相应更改,因为我们已指示正文显示子项的当前索引
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],
bottomNavigationBar: BottomNavigationBar(
onTap: onTabTapped, // new
currentIndex: _currentIndex, // new
items: [
new BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
new BottomNavigationBarItem(
icon: Icon(Icons.mail),
title: Text('Messages'),
),
new BottomNavigationBarItem(
icon: Icon(Icons.person), title: Text('Profile'))
],
),
);
}
}
在 Flutter 中,您可以使用名为 ImageIcon
的小部件从图像创建图标。您只需提供 ImageProvider
的实例,例如 AssetImage
、NetworkImage
、MemoryImage
和 ResizeImage
。下面的示例使用 AssetImage 加载图像。假设您有一个副本并在 pubspec.yaml
中加载图像,从图像资产创建 ImageIcon 就像下面的代码一样简单。
要创建一个ImageIcon
,你需要调用构造函数
const ImageIcon(
this.image, {
Key key,
this.size,
this.color,
this.semanticLabel,
})
你只需要通过图像。所有命名参数都是可选的。
要设置显示为图标的图像,需要传递一个ImageProvider
实例。为此,您需要创建任何 class 的实例,它是 ImageProvider 的后代,例如 AssetImage
ImageIcon(
AssetImage('assets/images/pikachu.png'),
size: 150,
color: Colors.yellow,
)
使用 ImageIcon 作为 图标 示例
BottomNavigationBarItem(
title: Text(“Cartoon”),
icon: ImageIcon(
AssetImage('assets/images/pikachu.png'),
)
)
你也可以这样使用
BottomNavigationBarItem(
title: Text("Cartoon"),
icon: Image.asset("assets/images/pikachu.png", height: 30, width: 30, color: Colors.grey))
对我来说,上面提到的 ImageIcon 选项不起作用。它通过使用 Image.asset
BottomNavigationBarItem(
title:Text(AppLocalizations.of(context).converter), icon: Image.asset(
"images/convertericon.png",
)),
我在我的 flutter 项目中使用 bottomNavigationBar 我是 flutter 的新手,我不知道分页和使用资产图像图标而不是 iconData。我搜索了过去 2 天,但没有得到满意的结果。请帮帮我......
我在此处使用了 bottomNavigationBar 和一个很棒的按钮 https://medium.com/coding-with-flutter/flutter-bottomappbar-navigation-with-fab-8b962bb55013 https://github.com/bizz84/bottom_bar_fab_flutter
我也尝试使用这里的自定义图标 https://medium.com/flutterpub/how-to-use-custom-icons-in-flutter-834a079d977
但没有成功
我只是想换个图标,想知道分页怎么用。我可以对最后一个分页示例代码进行更改。
以下是如何使用资产中的图标
ImageIcon(
AssetImage("images/icon_more.png"),
color: Color(0xFF3A5A98),
),
为 BottomNavBar 尝试此示例 click
所以你要替换的是 BottomNavigationBarItem
new BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
到
new BottomNavigationBarItem(
icon: ImageIcon(
AssetImage("images/icon_more.png"),
color: Color(0xFF3A5A98),
),
title: Text('Home'),
),
你可以从我分享的文章中了解导航
更新 这是您要求的示例。
所以这里的 _children 变量包含您要根据 BottomNavBarItem 的选择进行导航的页面列表。
我们的导航方式是,当我们按下一个选项卡项时,我们使用 onTabTapped 函数设置它的索引。当索引更改时,视图会相应更改,因为我们已指示正文显示子项的当前索引
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],
bottomNavigationBar: BottomNavigationBar(
onTap: onTabTapped, // new
currentIndex: _currentIndex, // new
items: [
new BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
new BottomNavigationBarItem(
icon: Icon(Icons.mail),
title: Text('Messages'),
),
new BottomNavigationBarItem(
icon: Icon(Icons.person), title: Text('Profile'))
],
),
);
}
}
在 Flutter 中,您可以使用名为 ImageIcon
的小部件从图像创建图标。您只需提供 ImageProvider
的实例,例如 AssetImage
、NetworkImage
、MemoryImage
和 ResizeImage
。下面的示例使用 AssetImage 加载图像。假设您有一个副本并在 pubspec.yaml
中加载图像,从图像资产创建 ImageIcon 就像下面的代码一样简单。
要创建一个ImageIcon
,你需要调用构造函数
const ImageIcon(
this.image, {
Key key,
this.size,
this.color,
this.semanticLabel,
})
你只需要通过图像。所有命名参数都是可选的。
要设置显示为图标的图像,需要传递一个ImageProvider
实例。为此,您需要创建任何 class 的实例,它是 ImageProvider 的后代,例如 AssetImage
ImageIcon(
AssetImage('assets/images/pikachu.png'),
size: 150,
color: Colors.yellow,
)
使用 ImageIcon 作为 图标 示例
BottomNavigationBarItem(
title: Text(“Cartoon”),
icon: ImageIcon(
AssetImage('assets/images/pikachu.png'),
)
)
你也可以这样使用
BottomNavigationBarItem(
title: Text("Cartoon"),
icon: Image.asset("assets/images/pikachu.png", height: 30, width: 30, color: Colors.grey))
对我来说,上面提到的 ImageIcon 选项不起作用。它通过使用 Image.asset
BottomNavigationBarItem(
title:Text(AppLocalizations.of(context).converter), icon: Image.asset(
"images/convertericon.png",
)),