第四百零七回 如何解决组件重名的问题

我们在上一章回中介绍了"readMore简介"相关的内容，本章回中将介绍如何解决组件重名的问题.闲话休提，让我们一起Talk Flutter吧。

1. 概念介绍

我们在本章回中介绍的组件重名是指不同包中使用了相同名称的组件，在程序中导入这些包后就会发生同名组件名称冲突的问题，因为编译器不知道使用哪个包中的组件。

比如PackageA中有一个名叫BookWidget的组件，而PackageB中也有一个名叫BookWidget的组件，在代码中导入PackageA和PackageB时就会导致BookWidget发生重名问题，本章回中将介绍如何解决这类组件重名的问题。

2. 问题与解决方法

2.1 问题描述

在同一个文件中引入不同包后会导致包中同名的组件发生名称冲突的问题，此时IDE会报错，它会发出红色错误提示，详细的错误信息如下：

The name 'Text' is defined in the libraries 'package:flutter/src/widgets/text.dart' and 'package:html/dom.dart'. (Documentation)  
Try using 'as prefix' for one of the import directives, or hiding the name from all but one of the imports.

从错误信息中可以看到名叫Text的组件发生了名称冲突，导致冲突的包为官方SDK中的widgets包和名叫html的三方包。同时也给出了解决问题的建议。

2.2 问题解决

解决组件重名的思路就是对包进行生命名，这个可以使用dart的as语法解决，下面是一个示例:

import 'package:flutter/material.dart';
///这个包中定义了Text类与material中的Text有冲突,所以重命名。
// import 'package:html/dom.dart' ;
import 'package:html/dom.dart' as html_dom;


///在AppBar中使用官方SDK中的Text组件
  appBar: AppBar(
    title:const Text("Example of HtmlView"),
    backgroundColor: Colors.purpleAccent,
  ),

///在重名组件前面使用重命名后的包名当作前缀
  void visitText(html_dom.Text node) {
    if (node.data.trim().isNotEmpty) {
      debugPrint('$indent${node.data.trim()}');
    }
  }

在上面的示例中，我们主要解决了Text组件名称冲突的问题，Text是官方SDK提供的组件，而三方包html也提供了名叫Text的组件，我们在代码中同时引入了这两个包，因此导致了Text组件重名，我们的解决方法是把三方包中的文件重命名为html_dom，在使用三方包中的Text组件时，把重命名后的名称html_dom当作组件的前缀，而在使用官方包中的Text组件时直接使用组件名就可以。

3. 内容总结

最后，我们对本章回的内容做一个全面的总结：

• 在同一文件中使用不同包中的同名组件后会引起组件名称冲突；
• 通过对包名进行重命名可以解决组件名称冲突的问题；
• 给包重命名后需要把重命名后的名称当作组件的前缀，这样才可以使用包中的组件；

看官们，与"如何解决组件重名的问题"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!