如何在富文本flutter中使用expanded

Question

大家晚上好。我正在尝试在我的富文本中使用扩展但无法实现。我的主要问题是小部件在不同的屏幕尺寸上溢出，所以我需要一种方法来实现扩展，因为扩展将帮助文本根据屏幕的大小调整

代码：

  Container(
                width: double.maxFinite,
                height: 100,
                margin: const EdgeInsets.only(left: 150,top: 50),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      "Watch your playlist",
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                        color: color.AppColor.homePageDetails
                      ),
                    ),
                    SizedBox(height: 10,),//56:39
                    RichText(
                      text: TextSpan(
                       text: "stream up\n",
                        style:TextStyle(
                          color: color.AppColor.homePagePlanColor,
                          fontSize: 16
                        ),
                        children: [
                          TextSpan(
                            text:"check out your favourite"
                          )
                        ]
                      ),
                    ),

                  ],
                ),
              )

Answer 1

很久以前我遇到过同样的问题，一个解决方案是在行内使用灵活的小部件：

             Row(
                children: [
                  Flexible(
                    child: RichText(
                      text: const TextSpan(
                          text: "stream up\n",
                          color: color.AppColor.homePagePlanColor,
                          style: TextStyle(fontSize: 16),
                          children: [
                            TextSpan(text: "check out your favourite")
                          ]),
                    ),
                  ),
                ],
              ),

确保使用 const 来避免性能问题。

Answer 2

你可以使用这个包 = flutter_screenutil 它为不同的屏幕尺寸分配所有应用程序内容

Answer 3

溢出问题来自 Container 的 height。您可以简单地从 Container 中删除 height ，它将正常工作，没有任何问题

     Container(
            width: double.maxFinite,
            margin: const EdgeInsets.only(left: 150, top: 50),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [

注意：左边距 150 占左边 150px，"stream up\n" => \n 创建换行符。默认情况下，它会占用所需的大小

Answer 4

                      Expanded(
                              child: SingleChildScrollView(
                                scrollDirection: Axis.horizontal,
                                child: RichText(
                                  text: TextSpan(

对我有用

如何在富文本flutter中使用expanded

How to use expanded in rich text flutter

flutter

flutter-layout

cross-platform