在Flutter中,BottomNavigationBar
组件通常会显示图标和文本。然而,如果你想要一个只有文本而没有图标的 BottomNavigationBar
,你可以通过一些定制来实现。
以下是一个简单的例子,展示了如何创建一个只有文本的 BottomNavigationBar
:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('BottomNavigationBar with Text Only'),
),
body: Center(child: Text('Content goes here')),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
label: 'Home',
icon: Icon(Icons.home, size: 0), // 设置图标大小为0使其不可见
),
BottomNavigationBarItem(
label: 'Search',
icon: Icon(Icons.search, size: 0), // 设置图标大小为0使其不可见
),
BottomNavigationBarItem(
label: 'Profile',
icon: Icon(Icons.person, size: 0), // 设置图标大小为0使其不可见
),
],
showSelectedLabels: true, // 显示选中的标签
showUnselectedLabels: true, // 显示未选中的标签
),
),
);
}
}
在这个例子中,我们通过将 icon
属性的 Icon
组件的 size
设置为0来使图标不可见。同时,我们设置了 showSelectedLabels
和 showUnselectedLabels
属性为 true
,以确保选中和未选中的标签都会显示。
领取专属 10元无门槛券
手把手带您无忧上云