溢出颤动的列和行

Question

我正在尝试将这个列表视图放入聊天列表中。类似于您在 WhatsApp 和电报中看到的内容。但是，我一直在努力了解行和列是如何工作的，因为我一直在溢出。

代码如下：

ListView(
      physics: BouncingScrollPhysics(),
      children: [
        Dismissible(
          key: Key(""),
          background: Container(color: Colors.grey[200]),
          direction: DismissDirection.endToStart,
          child: InkWell(
            onTap: () {},
            child: Column(
              mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Flex(
                  direction: Axis.vertical,
                  children: [
                    Text("Hello"),
                  ],
                ),
                Flex(
                  direction: Axis.vertical,
                  children: [
                    Text(
                      "al;skdl;aksd a;skd ;aks;dk a;skd ;laks;d a;lsk d;lkas; dka;lsk d;laks; ldka;slk d;a",
                      overflow: TextOverflow.ellipsis,
                      maxLines: 2,
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ],

Answer 1

现在我们经常遇到文本溢出问题，所以如果我们认为我们已经为列提供了特定的宽度并对其进行了限制，但是如果我们用灵活的小部件将这些东西包装起来，它现在会告诉 column/Row 您可以更改您的大小并且灵活

顺序是 灵活 > 容器 > 列/行

我们将其应用于容器的原因是 Column/Row 将询问直接父级的宽度和高度 现在这个问题也可以通过文本溢出属性来解决，即我们可以剪切文本，但如果我们不想要呢

所以你所要做的就是将列/行包装在容器中，然后进入灵活，因为现在它会告诉容器是的，你可以调整你的高度

您的概念可以通过小部件父子关系的实际工作方式来清除，即简而言之 基本上，如果我是个孩子，我会问我的父母，好吧，我的尺码是多少，所以因为我的父母如果有尺码，它会约束我，但如果它没有尺码，它会问它的父母，好吧，告诉我应该占用什么空间，它继续。 Expanded and Flexible 表示你可以调整自己而不是固定。

Flexible(
                                          child: Container(
                                            margin: EdgeInsets.only(left: 10.0,right: 10.0),
                                            child: Column(
                                              mainAxisAlignment: MainAxisAlignment.start,
                                              crossAxisAlignment: CrossAxisAlignment.start,
                                              children: [
                                                Text('${dataBookTitleSearch1[index]} ', style: kGoodSearchResultTextStyle, textAlign: TextAlign.left,),
                                                SizedBox(
                                                  height: 10.0,
                                                ),
                                                Text('${dataBookAuthorSearch1[index]}', style: kGoodSearchResultTextStyle,textAlign: TextAlign.left),
                                                SizedBox(
                                                  height: 10.0,
                                                ),
                                                Text('${dataBookExtensionSearch1[index]} ', style: kGoodSearchResultTextStyle,textAlign: TextAlign.left),

                                                SizedBox(
                                                  height: 20.0,
                                                ),
                                                Container(
                                                  width: 80.0,
                                                  height: 40.0,
                                                  decoration: BoxDecoration(
                                                      borderRadius: BorderRadius.all(Radius.circular(20.0)),
                                                      color: Colors.white
                                                  ),
                                                  child: Padding(
                                                    padding: const EdgeInsets.only(left:20.0,top: 12.0),
                                                    child: Text('Read'),
                                                  ),
                                                ),

                                              ],
                                            ),
                                          ),
                                        )