布局：Flutter 中的文本溢出

问题描述

我有一个问题，我的文字溢出了右侧的卡片，但我尝试应用 Expanded \ Flexible，我尝试将 FittedBox 与 fit: BoxFit.scaleDown 一起使用，但没有使用，所以要么我将它们放在错误的祖先顺序中，要么是其他问题。最初，Container 的高度应该是 98 但由于文本很长，我想保留设计但高度可以更改为动态而不是固定的，因为我想将文本放入 Card 小部件中。

代码如下：

Card(
                                          color: Color(0xFF29ABE2),elevation: 4,shape: RoundedRectangleBorder(
                                            borderRadius:
                                                BorderRadius.circular(4),),child: Wrap(
                                            children: [
                                              Container(
                                                height: 98,// height can changed in order to fit the text,but I would like to make it more dynamically then instead of giving it a fixed height
                                                width: MediaQuery.of(context)
                                                    .size
                                                    .width,decoration: Boxdecoration(
                                                    color: Colors.white,borderRadius:
                                                        BorderRadius.only(
                                                            bottomright: Radius
                                                                .circular(4),topRight:
                                                                Radius.circular(
                                                                    4))),margin:
                                                    EdgeInsets.only(left: 3),child: Row(
                                                  mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .spaceBetween,children: [
                                                    Padding(
                                                      padding:
                                                          const EdgeInsets.only(
                                                              left: 16.0),child: Column(
                                                        crossAxisAlignment:
                                                            CrossAxisAlignment
                                                                .start,mainAxisAlignment:
                                                            MainAxisAlignment
                                                                .spaceEvenly,children: [
                                                          Text('7/22/2021 14:59'),Text('New York,NY,USA - 1 World Way,Los Angeles,CA 90045,USA'),Text('7/22/2021 14:59'),],Padding(
                                                      padding:
                                                          const EdgeInsets.only(
                                                              right: 22.0),child: TextButton(
                                                        onpressed: () {
                                                         //some logic
                                                        },child: Text('VIEW'),

我已经从小部件中删除了样式属性，以便可以更轻松地查看代码。在此先感谢您的帮助！

解决方法

向 Flexible 内的所有小部件添加 Row

更改 flex 值以调整每个项目的大小。

...

Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [
        Flexible(
          flex: 3,child: Padding(
            padding: const EdgeInsets.only(left: 16.0),child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [
                Text('7/22/2021 14:59'),Text(
                    'New York,NY,USA - 1 World Way,Los Angeles,CA 90045,USA',overflow: TextOverflow.clip),Text('7/22/2021 14:59'),],),Flexible(
          flex: 1,child: Padding(
            padding: const EdgeInsets.only(right: 22.0),child: TextButton(
              onPressed: () {
                //some logic
              },child: Text('VIEW'),);

...

,

我添加了一个 Expanded to Column 以使其填充尽可能多的空间。

为了使高度根据文本动态变化，我删除了 Container 的固定高度，并在 Column 中添加了属性“mainAxisSize: MainAxisSize.min”以填充尽可能少的空间。

最后，我调整了内边距，为了在文本之间留出间距，我在它们之间使用了 Sizedbox。

...

Container(
            width: MediaQuery.of(context).size.width,decoration: BoxDecoration(
                color: Colors.white,borderRadius: BorderRadius.only(
                    bottomRight: Radius.circular(4),topRight: Radius.circular(4))),margin: EdgeInsets.only(left: 3),padding: EdgeInsets.symmetric(vertical: 16.0,horizontal: 16.0),child: Row(
              children: [
                Expanded(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,crossAxisAlignment: CrossAxisAlignment.start,children: [
                      Text('7/22/2021 14:59'),SizedBox(height: 8.0),Text(
                        'New York,TextButton(
                  onPressed: () {
                    //some logic
                  },...

,

您应该使用Flexible or Expanded Widget，如下面的代码：

> setDT(df)[,out := toString(seq(start,end)),ID][]
   ID start end desired_output_aschar            out
1:  1     2   5               2,3,4,5     2,5
2:  2     4   7               4,5,6,7     4,7
3:  3     6   9               6,7,8,9     6,9
4:  4     8  11             8,9,10,11   8,11
5:  5    10  13           10,11,12,13 10,13

您的输出屏幕如下所示：