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

站长

2024年06月20日 08:12 · 阅读数 4

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

1个回答

test

2024-06-20

首先把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,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容