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

Question

大家好，我是 Flutter 的新手。

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

下面我添加了一个由 Hanz Müller 编写的代码作为示例。主题导航栏。

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

我只知道 html 和 css，因为它是一种爱好，现在我搜索找到 body 容器的地方:)

非常感谢您的帮助

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小部件所在的代码。

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

title: Text(destination.title)

因此，如果您不需要 Text 小部件，您可以简单地将其替换为 Container 以不显示任何内容。

title: Text(destination.title)

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