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 - 如何在我的未来构建器文本小部件中获得价值回报

我得到了用下划线 Flutter 绘制的文本小部件

Flutter 中两个容器之间不需要的空间

Flutter - setState 不更新内部有状态小部件

Dart/flutter 小部件测试,无论是按键还是文本都找不到文本小部件