带有两行标签/文本的 TextButton 图标，可以吗？
Posted
技术标签:
【中文标题】带有两行标签/文本的 TextButton 图标，可以吗？【英文标题】：TextButton Icon with Two Line Label/Text, Is it possible? 【发布时间】：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),
),
),
],
),
),
),
],
),
],
),
),
],
),
),
);
【问题讨论】：
【参考方案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")])),
]),
【讨论】：
以上是关于带有两行标签/文本的 TextButton 图标，可以吗？的主要内容，如果未能解决你的问题，请参考以下文章