前端 - Flutter如何实现带有图标和文字的自定义标签?

Question

我想自定义一个 tag, 前边展示icon 后边是文字, 放在一个横向滚动条里使用, 我是 SingleChildScrollView 嵌套 Row , 然后 这个 Tag 组件 也是用 Row 做的 但是报错必须要有大小 但是使用Container 设定宽度的话 我的 text 多少字是不确定的 请问 大佬们 应该是怎么弄?

Answer 1

Flutter 中实现带有图标和文字的自定义标签，并且考虑到文字长度不确定的问题，可以通过使用 Expanded widget 或者 Flexible widget 来解决。这两个 widget 都可以根据子元素的内容动态调整大小。Expanded 会按照其在 Row 或 Column 中的比例来分配空间，而 Flexible 则会根据子元素的大小动态调整。

下面是一个简单的示例，展示了如何创建一个带有图标和文字的自定义标签，并将其放在一个横向滚动条（SingleChildScrollView 嵌套 Row）中：

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('Custom Tag with Icon and Text'),        ),        body: Center(          child: MyCustomTags(),        ),      ),    );  }}class MyCustomTags extends StatelessWidget {  @override  Widget build(BuildContext context) {    return SingleChildScrollView(      scrollDirection: Axis.horizontal,      child: Row(        children: List.generate(          10, // 假设有10个标签          (index) => MyCustomTag(            icon: Icons.star, // 图标            text: 'Tag ${index + 1}', // 文字          ),        ),      ),    );  }}class MyCustomTag extends StatelessWidget {  final IconData icon;  final String text;  MyCustomTag({required this.icon, required this.text});  @override  Widget build(BuildContext context) {    return Padding(      padding: const EdgeInsets.all(8.0),      child: Row(        children: <Widget>[          Icon(icon),          SizedBox(width: 8.0), // 图标和文字之间的间距          Expanded( // 动态调整剩余空间以适应文字长度            child: Text(text),          ),        ],      ),    );  }}

在这个示例中，MyCustomTag 组件使用 Row 来布局图标和文字。Icon 用于显示图标，Text 用于显示文字。在 Icon 和 Text 之间，我添加了一个 SizedBox 来设置图标和文字之间的间距。然后，使用 Expanded widget 来动态调整 Text 组件的大小，以适应不同长度的文字。

这样，即使文字长度不确定，MyCustomTag 组件也能根据内容动态调整大小，并且可以在 SingleChildScrollView 中正确地显示。