右侧溢出 x 个像素的 RenderFlex

Question

我试图用以下代码显示项目列表，我试图用Expanded 包装这个Column，但得到了同样的错误。

class QuizDoneByStudent extends StatelessWidget {
  const QuizDoneByStudent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    return Scaffold(
      backgroundColor: kDarkGrey2,
      body: SafeArea(
        child: Container(
          child: Column(
            children: [
              Stack(
                clipBehavior: Clip.none,
                children: [
                  Container(
                    height: size.height * .2,
                    decoration: BoxDecoration(
                        image: DecorationImage(
                            image:
                                NetworkImage("https://imgur.com/Mr6Rozm.png"))),
                  ),
                  Positioned(
                    bottom: -20,
                    left: 20,
                    child: CircleAvatar(
                      radius: 35,
                      backgroundColor: kLightGreyColor,
                      backgroundImage:
                          NetworkImage("https://i.imgur.com/MGcuXst.png"),
                    ),
                  ),
                  Positioned(
                    bottom: -33,
                    left: 100,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          "DonaldTrump",
                          style: TextStyle(
                              color: Colors.white,
                              fontWeight: FontWeight.bold,
                              fontSize: 20),
                        ),
                        SizedBox(
                          height: 10,
                        ),
                        Text(
                          "@fintory",
                          style: TextStyle(
                            color: Colors.white,
                          ),
                        )
                      ],
                    ),
                  )
                ],
              ),
              SizedBox(
                height: 50,
              ),
              PostQuizStatListView()
            ],
          ),
        ),
      ),
    );
  }
}

class PostQuizStatListView extends StatelessWidget {
  const PostQuizStatListView({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ListView.separated(
          shrinkWrap: true,
          itemBuilder: (BuildContext context, int index) {
            return PostQuizStat();
          },
          separatorBuilder: (BuildContext context, int index) => SizedBox(
                height: 10,
              ),
          itemCount: 5),
    );
  }
}

class PostQuizStat extends StatefulWidget {
  const PostQuizStat({
    Key? key,
  }) : super(key: key);

  @override
  _PostQuizStatState createState() => _PostQuizStatState();
}

class _PostQuizStatState extends State<PostQuizStat> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(10),
      decoration: BoxDecoration(
          border: Border.all(color: kLightGreyColor),
          borderRadius: BorderRadius.circular(15)),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          CachedNetworkImage(
            placeholder: (context, url) =>
                Image.asset("assets/images/post_placeholder.png"),
            imageUrl: "https://imgur.com/uHZ3Mim.png",
          ),
          SizedBox(
            width: 10,
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                "The Future of sdsfd sd ffsdf sdfsdf d ",
                style:
                    TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
              ),
              SizedBox(
                height: 5,
              ),
              Text(
                "5 - 8 - 2021     14:30",
                style: TextStyle(color: Colors.white),
              )
            ],
          ),
          SizedBox(
            width: 10,
          ),
          Text(
            "88%",
            style: TextStyle(
                color: Colors.white, fontWeight: FontWeight.bold, fontSize: 30),
          )
        ],
      ),
    );
  }
}

我遇到了这个溢出问题

Answer 1

` 文本（

 "The Future of sdsfd sd ffsdf sdfsdf d ",
            style:
                TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
          ),`

正在溢出。没有足够的空间来显示整个文本。您可以将其设为多行或使用 Text 的 overflow 属性

Answer 2

尝试在 Expanded 或 Flex Widget 中添加您的文本小部件，请参阅我的回答 here

Expanded (
   child: Text (),
  ),

Answer 3

只需将列包围起来，如下所示

  Expanded(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          "The Future of sdsfd sd ffsdf sdfsdf d ",
          style:
          TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
        ),
        SizedBox(
          height: 5,
        ),
        Text(
          "5 - 8 - 2021     14:30",
          style: TextStyle(color: Colors.white),
        )
      ],
    ),
  ),

Answer 4

用扩展的或灵活的方式包装这些文本小部件：

Flexible(child: Text(
                "The Future of sdsfd sd ffsdf sdfsdf d ",
        overflow: TextOverflow.fade,
        style:
              TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
              ),
)

和同一列中的其他长的。 你也可以用flexible包裹它，并使用overflow:Textoverflow.elipsis。