如何解决Flutter 应用程序中我的文本小部件内的额外间距
我创建了一个移动应用程序,我使用了来自 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,fontSize: 24.0,fontWeight: FontWeight.w900,],
方法二
Text.rich(
TextSpan(
text: "Welcome !\n",style: TextStyle(
color: Colors.white,children: [
TextSpan(
text: userData.fullName,style: TextStyle(
color: Colors.white,
现在我使用了另一种方法来解决这个问题,但又创建了另一个方法。
方法三截图如下。
现在间距问题已修复,但它是在文本向下移动时产生的。我希望它在没有巨大差距的情况下居中。
Stack(
alignment: Alignment.topLeft,clipBehavior: Clip.none,Positioned(
top: 20.0,child: Text(
userData.fullName,
整个头部的完整代码如下
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,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,// 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,// 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(),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,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,fontSize: 24.0,fontWeight: FontWeight.w900,],NOTE: you can also give height inside the Text widget
Text(
userData.fullName,style: TextStyle(
color: Colors.white,height: 1.2,// assign height to fontSize ratio as per your choice
),
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。