连接来自不同来源的Flutter代码，例如youtube教程

Question

你好，我是新来的人。

为了了解Flutter，我观看了很多视频并阅读了博客文章。但是总有一个问题：每个视频都是关于一个特定主题的，它们都以一个新的Flutter项目开始。只要我想继续处理代码，就无法更改代码。

[下面，我添加了HanzMüller的代码作为示例。主题导航栏。

但是现在我想删除图标下的文本，并用文本和图像编辑不同的应用程序页面（正文）。我无法删除图标下的文本，因为文本不能为“ null”。而且我无法编辑不同的主体页面，因为找不到位置。

我只知道html和css，因为这是一种爱好，现在我在寻找可以找到主体容器的地方:)

非常感谢您的帮助

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class Destination {
  const Destination(this.title, this.icon, this.color);
  final String title;
  final IconData icon;
  final MaterialColor color;
}

const List<Destination> allDestinations = <Destination>[
  Destination('Home', Icons.home, Colors.teal),
  Destination('Business', Icons.business, Colors.cyan),
  Destination('School', Icons.school, Colors.orange),
  Destination('Flight', Icons.flight, Colors.blue)
];


class DestinationView extends StatefulWidget {
  const DestinationView({ Key key, this.destination }) : super(key: key);

  final Destination destination;

  @override
  _DestinationViewState createState() => _DestinationViewState();
}

class _DestinationViewState extends State<DestinationView> {
  TextEditingController _textController;

  @override
  void initState() {
    super.initState();
    _textController = TextEditingController(
      text: 'sample text: ${widget.destination.title}',
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('${widget.destination.title} Text'),
        backgroundColor: widget.destination.color,
      ),
      backgroundColor: widget.destination.color[100],
      body: Container(
        padding: const EdgeInsets.all(32.0),
        alignment: Alignment.center,
        child: TextField(controller: _textController),
      ),
    );
  }

  @override
  void dispose() {
    _textController.dispose();
    super.dispose();
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with TickerProviderStateMixin<HomePage> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        top: false,
        child: IndexedStack(
          index: _currentIndex,
          children: allDestinations.map<Widget>((Destination destination) {
            return DestinationView(destination: destination);
          }).toList(),
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: allDestinations.map((Destination destination) {
          return BottomNavigationBarItem(
            icon: Icon(destination.icon),
            backgroundColor: destination.color,
            title: Text(destination.title)
          );
        }).toList(),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: HomePage(), debugShowCheckedModeBanner: false));
}

Answer 1

如果要删除图标下方的文本，请检查Text小部件的放置位置。

所以您在Text中有相关的BottomNavigationBarItem小部件

title: Text(destination.title)

因此，如果不需要Text小部件，只需将其替换为Container即可不显示任何内容。

title: Text(destination.title)

我建议您阅读代码并理解它。您越了解小部件的构建和呈现方式，就越容易修改它们。