问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
Joe_
    36622

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

    flutter前端
    阅读 1.1k
    avatarAI BotBETA

    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 中正确地显示。

    1 个回答
    得票最新
    头像
    Stephanie
      1.9k43764
      ✓ 已被采纳

      首先把SingleChildScrollView的scrollDirection属性设置为：Axis.horizontal试试看；

      不行你再看下面的代码

      class THomePage extends StatelessWidget {
  const THomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text('Flutter如何实现带有图标和文字的自定义标签?'),
        backgroundColor: Colors.yellow,
      ),
      body: const Center(
        child: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Row(
            children: [
              SizedBox(
                width: 20,
              ),
              Row(
                children: [
                  Icon(Icons.add),
                  Text('AAAAAAAA'),
                ],
              ),
              SizedBox(
                width: 20,
              ),
              Row(
                children: [
                  Icon(
                    Icons.add,
                  ),
                  Text('BBBBBBBBB'),
                ],
              ),
              SizedBox(
                width: 20,
              ),
              Row(
                children: [
                  Icon(Icons.add),
                  Text('CCCCCCCC'),
                ],
              ),
              SizedBox(
                width: 20,
              ),
              Row(
                children: [
                  Icon(Icons.add),
                  Text('DDDDDDDDDD'),
                ],
              ),
              SizedBox(
                width: 20,
              ),
              Row(
                children: [
                  Icon(Icons.add),
                  Text('EEEEEEEEEEEEEEEEEEE'),
                ],
              ),
              SizedBox(
                width: 20,
              ),
              Text('F'),
              SizedBox(
                width: 20,
              ),
            ],
          ),
        ),
      ),
    );
  }
}
      查看全部 1 个回答
      推荐问题