Flutter 应用程序中我的文本小部件内的额外间距

编程问答 2022-04-23

问题描述

我创建了一个移动应用程序，我使用了来自 google 的名为 Baloo Paaji 2 的字体系列，但我遇到了在我的 2 个文本小部件之间创建额外间距的问题。您可以在下方看到该视图的图像。

enter image description here

我正在谈论的文字是欢迎！拉克夏耆那教。 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,

现在我使用了另一种方法来解决这个问题，但又创建了另一个方法。

方法三截图如下。

enter image description here

现在间距问题已修复，但它是在文本向下移动时产生的。我希望它在没有巨大差距的情况下居中。

该方法的代码如下。

                      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
  ),
dartspacespacetextwidget