Flutter 应用程序中我的文本小部件内部的额外间距
Posted
技术标签:
【中文标题】Flutter 应用程序中我的文本小部件内部的额外间距【英文标题】：Extra Spacing Inside My Text Widget In Flutter Application 【发布时间】：2021-09-07 02:04:38 【问题描述】：我创建了一个移动应用程序，并且我使用了来自 google 的名为 Baloo Paaji 2 的字体系列，我遇到了在我的 2 个文本小部件之间创建额外间距的问题。您可以在下面看到视图的图像。
我正在谈论的文本是欢迎！拉克夏耆那教。 2之间的空间太大了。没有 SizedBox 或 Padding 添加到文本小部件。我尝试使用 2 种不同的方法来查看该方法是否存在问题。两种不同的方法如下所示。
方法一
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Welcome !",
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 18.0,
fontWeight: FontWeight.w600,
),
),
Text(
userData.fullName,
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 24.0,
fontWeight: FontWeight.w900,
),
),
],
),
方法二
Text.rich(
TextSpan(
text: "Welcome !\n",
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 18.0,
fontWeight: FontWeight.w600,
),
children: [
TextSpan(
text: userData.fullName,
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 24.0,
fontWeight: FontWeight.w900,
),
),
],
),
),
现在我用另一种方法解决了这个问题，但又创建了一个。
方法三截图如下。
现在间距问题已解决，但它是在文本向下移动时创建的。我希望它在没有巨大差距的情况下成为中心。
该方法的代码如下。
Stack(
alignment: Alignment.topLeft,
clipBehavior: Clip.none,
children: [
Text(
"Welcome !",
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 18.0,
fontWeight: FontWeight.w600,
),
),
Positioned(
top: 20.0,
child: Text(
userData.fullName,
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 24.0,
fontWeight: FontWeight.w900,
),
),
),
],
),
整个header的完整代码如下
class HomeHeader extends StatelessWidget
@override
Widget build(BuildContext context)
// Get User UID
final user = Provider.of<MyAppUser>(context);
return Stack(
clipBehavior: Clip.none,
children: [
Container(
padding: EdgeInsets.symmetric(horizontal: 15.0),
width: MediaQuery.of(context).size.width,
height: 230.0,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color.fromRGBO(255, 18, 54, 1.0),
Color.fromRGBO(255, 164, 29, 1.0),
],
),
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(59.0),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
StreamBuilder(
stream: DatabaseService(uid: user.uid).userData,
builder: (context, snapshot)
UserDataCustomer userData = snapshot.data;
return Row(
children: [
ClipOval(
child: CachedNetworkImage(
height: 70,
width: 70,
imageUrl: userData.profilePicture,
),
),
SizedBox(
width: 10.0,
),
Stack(
alignment: Alignment.topLeft,
clipBehavior: Clip.none,
children: [
Text(
"Welcome !",
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 18.0,
fontWeight: FontWeight.w600,
),
),
Positioned(
top: 20.0,
child: Text(
userData.fullName,
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 24.0,
fontWeight: FontWeight.w900,
),
),
),
],
),
// Column(
// mainAxisAlignment: MainAxisAlignment.center,
// crossAxisAlignment: CrossAxisAlignment.start,
// children: [
// Text(
// "Welcome !",
// style: TextStyle(
// color: Colors.white,
// fontFamily: "BalooPaaji",
// fontSize: 18.0,
// fontWeight: FontWeight.w600,
// ),
// ),
// Text(
// userData.fullName,
// style: TextStyle(
// color: Colors.white,
// fontFamily: "BalooPaaji",
// fontSize: 24.0,
// fontWeight: FontWeight.w900,
// ),
// ),
// ],
// ),
// Text.rich(
// TextSpan(
// text: "Welcome !\n",
// style: TextStyle(
// color: Colors.white,
// fontFamily: "BalooPaaji",
// fontSize: 18.0,
// fontWeight: FontWeight.w600,
// ),
// children: [
// TextSpan(
// text: userData.fullName,
// style: TextStyle(
// color: Colors.white,
// fontFamily: "BalooPaaji",
// fontSize: 24.0,
// fontWeight: FontWeight.w900,
// ),
// ),
// ],
// ),
// ),
],
);
,
),
StreamBuilder(
stream: FirebaseFirestore.instance
.collection("Users Database")
.doc(user.uid)
.collection("Cart")
.snapshots(),
builder: (context, snapshot)
int totalItems = 0;
if (snapshot.connectionState == ConnectionState.active)
List documents = snapshot.data.docs;
totalItems = documents.length;
return GestureDetector(
onTap: ()
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CartScreen(),
),
);
,
child: Container(
height: 40.0,
width: 40.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(
10.0,
),
),
child: Center(
child: Text(
"$totalItems" ?? "0",
style: TextStyle(
fontSize: 20.0,
fontFamily: "BalooPaaji",
fontWeight: FontWeight.w600,
color: Colors.black,
),
),
),
),
);
,
),
],
),
),
Positioned(
top: 200.0,
child: SearchBar(
width: MediaQuery.of(context).size.width * 0.83,
hintText: "Location",
),
),
],
);
请有人帮助我并尽快解决此问题。
【问题讨论】：
【参考方案1】：我猜您正在尝试减少两行之间的间隙/填充。如果是这样，那么最简单的方法是将它们包裹在容器中并给它一个固定的高度。检查下面。
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 20, // assign height as per your choice
child: Text(
"Welcome !",
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 18.0,
fontWeight: FontWeight.w600,
),
),
),
Container(
height: 26, // assign height as per your choice
child: Text(
userData.fullName,
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 24.0,
fontWeight: FontWeight.w900,
),
),
),
],
),
NOTE: you can also give height inside the Text widget
Text(
userData.fullName,
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 24.0,
fontWeight: FontWeight.w900,
height: 1.2, // assign height to fontSize ratio as per your choice
),
),
【讨论】：
非常感谢 Ujjwal Raijada。我在文本样式中使用了高度并将其设置为 1.0 作为名称部分（Lakshya Jain），并且它起作用了。以上是关于Flutter 应用程序中我的文本小部件内部的额外间距的主要内容，如果未能解决你的问题，请参考以下文章
Flutter 列显示 Android 中小部件之间的额外空间
Flutter - 如何在我的未来构建器文本小部件中获得价值回报