首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何删除BottomNavigationBarItem的“图标”属性的空白?

如何删除BottomNavigationBarItem的“图标”属性的空白?
EN

Stack Overflow用户
提问于 2022-05-10 07:54:17
回答 1查看 198关注 0票数 2

在我的BottomNavigationBar和屏幕底部之间总是有一个未知的空白。左边的图像是所需的布局,但我只能在右边生成图像。

这是我的密码:

代码语言:javascript
运行
复制
import 'package:flutter/material.dart';

class Wrapper extends StatefulWidget {
  const Wrapper({Key? key}) : super(key: key);

  @override
  State<Wrapper> createState() => _WrapperState();
}

class _WrapperState extends State<Wrapper> {
  final _selectedItemColor = Colors.white;
  final _unselectedItemColor = const Color(0xffa3a3a3);
  final _selectedBgColor = const Color(0xff1a8468);
  final _unselectedBgColor = const Color(0xfff2f2f2);

  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Index 0: Home',
      style: optionStyle,
    ),
    Text(
      'Index 1: History',
      style: optionStyle,
    ),
    Text(
      'Index 2: Lucky',
      style: optionStyle,
    ),
    Text(
      'Index 3: Analysis',
      style: optionStyle,
    ),
    Text(
      'Index 4: Settings',
      style: optionStyle,
    ),
  ];

  void _onItemTapped(int index) {
    print('asdasdasd');
    setState(() {
      _selectedIndex = index;
    });
  }

  Color _getBgColor(int index) =>
      _selectedIndex == index ? _selectedBgColor : _unselectedBgColor;

  Color _getItemColor(int index) =>
      _selectedIndex == index ? _selectedItemColor : _unselectedItemColor;

  Widget _buildIcon(IconData iconData, String text, int index) => Container(
        width: double.infinity,
        height: kToolbarHeight,
        color: _getBgColor(index),
        child: InkWell(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Icon(iconData),
              Text(text,
                  style: TextStyle(fontSize: 12, color: _getItemColor(index))),
            ],
          ),
          onTap: () => _onItemTapped(index),
        ),
      );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        elevation: 0,
        centerTitle: false,
        title: const Text('Title'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        selectedFontSize: 0,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: _buildIcon(Icons.home, 'Home', 0),
            label: '',
          ),
          BottomNavigationBarItem(
            icon: _buildIcon(Icons.history, 'History', 1),
            label: '',
          ),
          BottomNavigationBarItem(
            icon: _buildIcon(Icons.api_outlined, 'Lucky', 2),
            label: '',
          ),
          BottomNavigationBarItem(
            icon: _buildIcon(Icons.analytics, 'Analysis', 3),
            label: '',
          ),
          BottomNavigationBarItem(
            icon: _buildIcon(Icons.settings, 'Settings', 4),
            label: '',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: _selectedItemColor,
        unselectedItemColor: _unselectedItemColor,
        type: BottomNavigationBarType.fixed,
        backgroundColor: const Color(0xfff2f2f2),
      ),
    );
  }
}

p/s:我已经替换了一些IconData,结果不会完全一样。

我可以知道如何删除底部的空白吗?任何帮助都是非常感谢的。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-05-12 08:12:05

尝尝这个!

1-在_getItemColor下面添加以下内容

代码语言:javascript
运行
复制
Color _getIconColor(int index) => _selectedIndex == index ? _selectedItemColor : _unselectedItemColor;

2-替换_buildIcon Widget

代码语言:javascript
运行
复制
Widget _buildIcon(IconData iconData, String text, int index) => Container(

    width: MediaQuery.of(context).size.width/5,
    color: _getBgColor(index),
    padding: EdgeInsets.only(bottom: 20,top: 10),
    child: InkWell(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Icon(iconData,color: _getIconColor(index)),
          Text(text, style: TextStyle(fontSize: 12, color: _getItemColor(index))),
        ],
      ),
      onTap: () => _onItemTapped(index),
    ),
  );

3-将你的脚手架包扎到SafeArea

代码语言:javascript
运行
复制
 return SafeArea(
  top: false,
  bottom: false,
  maintainBottomViewPadding: true,
  minimum: EdgeInsets.only(bottom: 2.0),
  child: Scaffold(code));

4-替换bottomNavigationBar

代码语言:javascript
运行
复制
 bottomNavigationBar: Container(
      child: Wrap(
        direction: Axis.horizontal,
        crossAxisAlignment: WrapCrossAlignment.center,
        alignment: WrapAlignment.spaceBetween,
        children: [
          _buildIcon(Icons.home, 'Home', 0),
          _buildIcon(Icons.history, 'History', 1),
          _buildIcon(Icons.api_outlined, 'Lucky', 2),
          _buildIcon(Icons.analytics, 'Analysis', 3),
          _buildIcon(Icons.settings, 'Settings', 4),
        ],
      ),
    ),

这里的完整源代码

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/72182580

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档