带有两行标签/文本的 TextButton 图标，可以吗？答案

【问题标题】：TextButton Icon with Two Line Label/Text, Is it possible?带有两行标签/文本的 TextButton 图标，可以吗？
【发布时间】：2021-11-14 03:56:40
【问题描述】：

尝试制作一个卡片菜单，作为应用主要部分的快速链接。我尝试使用 TextButton.Icon （但由于字数从 8 个字母的单词到 19 个字母的单词变化太大，字体大小对于较短的单词来说变得太小，所以美学看起来很奇怪。

我正在考虑将按钮的标签设置为两行，如随附的 JPEG 所示。

想知道这是否可以用材质按钮内的容器代替？

import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class QuickMenu extends StatelessWidget {
  const QuickMenu({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          automaticallyImplyLeading: false, //to remove back button
          backgroundColor: Colors.white,
          flexibleSpace: Container(
            margin: EdgeInsets.fromLTRB(4.0, 25.0, 4.0, 3.0),
            height: 55.0,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Image(
                  image: AssetImage('images/logo.png'),
                ),
                IconButton(
                  onPressed: () {},
                  icon: Icon(
                    Icons.notifications_outlined,
                    size: 35.0,
                    color: Color(0xFF959DA8),
                  ),
                ),
              ],
            ),
          ),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Card(
              margin: EdgeInsets.fromLTRB(15.0, 15.0, 15.0, 15.0),
              clipBehavior: Clip.antiAlias,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10.0),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      Padding(
                        padding:
                            const EdgeInsets.fromLTRB(10.0, 5.0, 15.0, 3.0),
                        child: Text(
                          'MENU BUTTONS',
                          style: TextStyle(
                            fontFamily: "Roboto",
                            fontSize: 20.0,
                            color: Color(0xFFD4D7DA),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Expanded(
                        child: Row(
                          children: [
                            TextButton.icon(
                              onPressed: () {},
                              icon: Icon(Icons.home,
                                  color: Colors.white, size: 30.0),
                              label: Text(
                                'Text Button 1',
                                style: TextStyle(
                                    fontFamily: 'Roboto',
                                    fontSize: 15.0,
                                    color: Colors.white),
                              ),
                              style: TextButton.styleFrom(
                                padding:
                                    EdgeInsets.fromLTRB(10.0, 8.0, 20.0, 8.0),
                                backgroundColor: Color(0xFFD4D7DA),
                              ),
                            ),
                            SizedBox(
                              width: 10.0,
                            ),
                            TextButton.icon(
                              onPressed: () {},
                              icon: Icon(Icons.home,
                                  color: Colors.white, size: 30.0),
                              label: Text(
                                'Text Button 2',
                                style: TextStyle(
                                    fontFamily: 'Roboto',
                                    fontSize: 15.0,
                                    color: Colors.white),
                              ),
                              style: TextButton.styleFrom(
                                padding:
                                    EdgeInsets.fromLTRB(10.0, 8.0, 75.0, 8.0),
                                backgroundColor: Color(0xFFD4D7DA),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Padding(
                        padding: const EdgeInsets.fromLTRB(2.0, 2.0, 2.0, 8.0),
                        child: Expanded(
                          child: Row(
                            children: [
                              TextButton.icon(
                                onPressed: () {},
                                icon: Icon(Icons.home,
                                    color: Colors.white, size: 30.0),
                                label: Text(
                                  'Text Button 3',
                                  style: TextStyle(
                                      fontFamily: 'Roboto',
                                      fontSize: 8.0,
                                      color: Colors.white),
                                ),
                                style: TextButton.styleFrom(
                                  padding:
                                      EdgeInsets.fromLTRB(10.0, 8.0, 20.0, 8.0),
                                  backgroundColor: Color(0xFFD4D7DA),
                                ),
                              ),
                              SizedBox(
                                width: 10.0,
                              ),
                              TextButton.icon(
                                onPressed: () {},
                                icon: Icon(Icons.home,
                                    color: Colors.white, size: 30.0),
                                label: Text(
                                  'Text Button 4',
                                  style: TextStyle(
                                      fontFamily: 'Roboto',
                                      fontSize: 8.0,
                                      color: Colors.white),
                                ),
                                style: TextButton.styleFrom(
                                  padding:
                                      EdgeInsets.fromLTRB(10.0, 8.0, 75.0, 8.0),
                                  backgroundColor: Color(0xFFD4D7DA),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

【问题讨论】：

标签： flutter flutter-layout flutter-test

【解决方案1】：

试试这个，如果你使用列表或列，你可以扩大它

import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class QuickMenu extends StatelessWidget {
  const QuickMenu({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          automaticallyImplyLeading: false, //to remove back button
          backgroundColor: Colors.white,
          flexibleSpace: Container(
            margin: EdgeInsets.fromLTRB(4.0, 25.0, 4.0, 3.0),
            height: 55.0,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Image(
                  image: AssetImage('images/profile.png'),
                ),
                IconButton(
                  onPressed: () {},
                  icon: Icon(
                    Icons.notifications_outlined,
                    size: 35.0,
                    color: Color(0xFF959DA8),
                  ),
                ),
              ],
            ),
          ),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Card(
              margin: EdgeInsets.fromLTRB(15.0, 15.0, 15.0, 15.0),
              clipBehavior: Clip.antiAlias,
              color: Colors.grey,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10.0),
              ),
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      children: [
                        Padding(
                          padding:
                              const EdgeInsets.fromLTRB(10.0, 5.0, 15.0, 3.0),
                          child: Text(
                            'MENU BUTTONS',
                            style: TextStyle(
                              fontFamily: "Roboto",
                              fontSize: 20.0,
                              color: Color(0xFFD4D7DA),
                            ),
                          ),
                        ),
                      ],
                    ),
                    Row(
                      children: [
                        TextButton.icon(
                          onPressed: () {},
                          icon: Icon(Icons.home),
                          label: Container(
                            width: 100,// change width as you need
                            height: 70, // change height as you need
                            child: Align(
                              alignment: Alignment.centerLeft,
                              child: Text(
                                "Text",
                                textAlign: TextAlign.left,
                                maxLines: 2, // change max line you need
                              ),
                            ),
                          ),
                          style: TextButton.styleFrom(
                            padding:
                            EdgeInsets.fromLTRB(10.0, 8.0, 20.0, 8.0),
                            backgroundColor: Color(0xFFD4D7DA),
                          ),
                        ),
                        SizedBox(width: 10,),
                        TextButton.icon(
                          onPressed: () {},
                          icon: Icon(Icons.payments_rounded),
                          label: Container(
                            width: 100, // change width as you need
                            height: 70, // change height as you need
                            child: Align(
                              alignment: Alignment.centerLeft,
                              child: Text(
                                "Text Button 2",
                                textAlign: TextAlign.left,
                                maxLines: 2,
                                style: TextStyle(fontSize: 24),// change max line you need
                              ),
                            ),
                          ),
                          style: TextButton.styleFrom(
                            padding:
                            EdgeInsets.fromLTRB(10.0, 8.0, 20.0, 8.0),
                            backgroundColor: Color(0xFFD4D7DA),
                          ),
                        ),
                      ],
                    ),
                    SizedBox(height: 10,),
                    Row(
                      children: [
                        TextButton.icon(
                          onPressed: () {},
                          icon: Icon(Icons.shopping_cart),
                          label: Container(
                            width: 100,
                            height: 70, // change height as you need
                            child: Align(
                              alignment: Alignment.centerLeft,
                              child: Text(
                                "TextButton 3  ",
                                textAlign: TextAlign.left,
                                maxLines: 2, // change max line you need
                              ),
                            ),
                          ),
                          style: TextButton.styleFrom(
                            padding:
                            EdgeInsets.fromLTRB(10.0, 8.0, 20.0, 8.0),
                            backgroundColor: Color(0xFFD4D7DA),
                          ),
                        ),
                        SizedBox(width: 10,),
                        TextButton.icon(
                          onPressed: () {},
                          icon: Icon(Icons.person_outline),
                          label: Container(
                            width: 100, // change width as you need
                            height: 70, // change height as you need
                            child: Align(
                              alignment: Alignment.centerLeft,
                              child: Text(
                                "TextButton 4",
                                textAlign: TextAlign.left,
                                maxLines: 2, // change max line you need
                              ),
                            ),
                          ),
                          style: TextButton.styleFrom(
                            padding:
                            EdgeInsets.fromLTRB(10.0, 8.0, 20.0, 8.0),
                            backgroundColor: Color(0xFFD4D7DA),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

输出：

【讨论】：

你能改吗？否则我会修复它
嗨@Jahidul，感谢您的快速回复......非常感谢。 :) 4 个按钮虽然会有不同的图标（仅示例：购物车、帐户、付款、账单）。所以我认为图标的小部件代码不起作用？此外，图标和标签将左对齐而不是居中对齐。再次感谢。
更新了我的答案，但如果你想要动态，你必须扩展你的行项目，我认为你可以根据需要改变其余的想法
你好@Jahidul，你建议的答案有效。太感谢了。ヽ(*´∀)ﾉﾟ
“但是如果你想要动态，你必须扩展你的行项目”是什么意思？可以给我看看吗？

【解决方案2】：

只需在标签中使用列小部件

            TextButton.icon(
          onPressed: () {},
          icon: const Icon(Icons.home, color: Colors.white, size: 30.0),
          label: Column(
            children: const [
              Text(
                'Text Button Title',
                style: TextStyle(fontFamily: 'Roboto', fontSize: 15.0, color: Colors.white),
              ),
              Text(
                'Text Button Subtitle',
                style: TextStyle(fontFamily: 'Roboto', fontSize: 15.0, color: Colors.white),
              ),
            ],
          ),
          style: TextButton.styleFrom(
            padding: const EdgeInsets.fromLTRB(10.0, 8.0, 20.0, 8.0),
            backgroundColor: const Color(0xFFD4D7DA),
          ),
        ),

或

您可以简单地使用 Row 小部件

            InkWell(
          onTap: () {},
          child: Container(
            padding: const EdgeInsets.fromLTRB(10.0, 8.0, 20.0, 8.0),
            color: const Color(0xFFD4D7DA),
            child: Row(
              children: const [
                Icon(Icons.home, color: Colors.white, size: 30.0),
                SizedBox(width: 12),
                Expanded(
                  child: Text(
                    'Text Button 1',
                    softWrap: true,
                    style: TextStyle(fontFamily: 'Roboto', fontSize: 15.0, color: Colors.white),
                  ),
                ),
              ],
            ),
          ),
        ),

【讨论】：

【解决方案3】：

要创建这样的 UI，您只需按照以下步骤操作：

获取一个列小部件。
在列内，取一个 Align(alignment:Alignment.left, child: Text("Menu Buttons") )
之后取两行

Row(children: [
                          Container(
                              height: 60,
                              width: 100,
                              child: Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: [Icon(Icons.add), Text("Text")])),
                          Container(
                              height: 60,
                              width: 100,
                              child: Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: [Icon(Icons.add), Text("Text")])),
                        ]),

【讨论】：