首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

有没有可能得到一个没有图标/只有文本的bottomNavBar?

在Flutter中,BottomNavigationBar 组件通常会显示图标和文本。然而,如果你想要一个只有文本而没有图标的 BottomNavigationBar,你可以通过一些定制来实现。

以下是一个简单的例子,展示了如何创建一个只有文本的 BottomNavigationBar

代码语言:javascript
复制
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来使图标不可见。同时,我们设置了 showSelectedLabelsshowUnselectedLabels 属性为 true,以确保选中和未选中的标签都会显示。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券