flutter - Flutter 应用程序中我的文本小部件内部的额外间距
问题描述
我创建了一个移动应用程序，我使用的是来自谷歌的名为 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,
),
),
),
],
),
整个标头的完整代码如下
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",
),
),
],
);
}
}
有人请帮助我并尽快解决此问题。
解决方案
我猜您正在尝试减少两条线之间的间隙/填充。如果是这样，那么最简单的方法是将它们包裹在容器中并给它一个固定的高度。检查下面。
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
),
),
推荐阅读
- c# - 如何将 C 程序放入 C# UWP？
- java - 为什么 Java 将 char 打印为整数？
- reactjs - react-popper 挂载位置不正确
- javascript - 在 HTML 表单底部显示 JavaScript 对象
- android - 如何在 WebView 应用程序上启用深度链接
- c# - .NET Core / .NET 5 中 BackgroundService 中 ServiceBase.OnCustomCommand 的等效项
- c# - C#用迭代创建一个数组
- flutter - Flutter：电子书应用程序：缩放和滚动文本的问题
- react-native - 在产品列表上调用模态会打开所有产品的模态，而不仅仅是被点击的那个
- node.js - Discord Bot {帮助}