Flutter -连续两个文本,其中一个优雅地溢出

6tqwzwtp  于 2023-06-07  发布在  Flutter
关注(0)|答案(2)|浏览(125)

如何让两个并排的文本小部件只允许最左边的小部件优雅地溢出?
列中的一个文本小部件很容易优雅地溢出。两个文本小部件并排在一行中是有问题的。
堆栈溢出需要更多的细节,但老实说,我可能只是浪费你更多的时间在这一点上。

Widget _listItem({String title, String subtitle}){
  return Row(
    children: <Widget>[
      _listItemIcon(),
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            _listItemTitle(title),
            Row(
              children: <Widget>[
                _listItemSubtitle(subtitle), // how do I allow this to overflow gracefully
                _listItemTime("2m") // but stop this from overflowing
              ],
            )
          ],
        ),
      ),
      _listItemFavorite()
    ],
  );
}

//////////////
Widget _listItemIcon(){
  return Icon(Icons.message);
}

Widget _listItemTitle(String title){
  return Text(
    title,
    softWrap: false,
    overflow: TextOverflow.fade,
    style: TextStyle(
      fontSize:24.0
    ),
  );
}

Widget _listItemSubtitle(String subtitle){
  return Text(
    "[$subtitle]",
    softWrap: false,
    overflow: TextOverflow.fade,
    );
}

Widget _listItemTime(String time){
  return Text(
    "[$time]",
    softWrap: false,
    overflow: TextOverflow.fade,
    );
}

Widget _listItemFavorite(){
  return Icon(Icons.favorite);
}

pkln4tw6

pkln4tw61#

您可以使用Flexible小部件:

Widget _listItemSubtitle(String subtitle) {
  return new Flexible(
    fit: FlexFit.loose,
    child: Text(
      "[$subtitle]",
      softWrap: false,
      overflow: TextOverflow.fade,
    ),
  );
}

备选方案:
如果您希望时间部件始终位于右侧,则可以将字幕文本 Package 在Expanded部件中:

Widget _listItemSubtitle(String subtitle){
  return Expanded(
    child: Text(
      "[$subtitle]",
      softWrap: false,
      overflow: TextOverflow.fade,
    ),
  );
}

7cjasjjr

7cjasjjr2#

有时我们在Row中有很多不同的小部件,在这种情况下,我们可以使用这种方法

child: SingleChildScrollView(
          physics: const NeverScrollableScrollPhysics(),
          scrollDirection: Axis.horizontal,
          child: Row(
            children: items,
          ),
        ),

相关问题