flutter - Flutter:使用扩展

Question

我有一个函数返回这样的小部件列表:

buildCaption() {
  List<String> splittedCaption = caption.split(' ');
  List<Widget> mergedCaption = new List<Widget>();
  for (String captionSplit in splittedCaption) {
    print(captionSplit);
    if (captionSplit.contains('#')) {
      mergedCaption.add(Text(
        '$captionSplit ',
        style: TextStyle(color: Colors.blue)
      ));
    } else {
      mergedCaption.add(Text('$captionSplit '));
    }
  }
  return mergedCaption;
}

然后，我有一个如下所示的行小部件:

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Expanded(child: Row(children: buildCaption())
  ]
)

但是，Expanded不会防止该行溢出屏幕大小。请如何显示从buildCaption方法返回的窗口小部件列表，同时仍然防止其溢出屏幕尺寸？

整个代码:

buildPostFooter() {
  return Column(
    children: <Widget>[
      mediaUrl.length > 1 ? Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: map<Widget>(
          mediaUrl,
          (index, media) {
            return Container(
              width: 8.0,
              height: 8.0,
              margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0),
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: currentMedia == index
                  ? Theme.of(context).primaryColor
                  : Color.fromRGBO(0, 0, 0, 0.4)
              )
            );
          }
        )
      ) : Text(''),
      Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Padding(padding: EdgeInsets.only(top: 40.0, left: 15.0)),
          GestureDetector(
            onTap: handleLikePost,
            child: Icon(
              isLiked ? Icons.favorite : Icons.favorite_border,
              size: 28.0,
              color: Colors.pink
            )
          ),
          Padding(padding: EdgeInsets.only(right: 5.0)),
          Text(
            '$likeCount likes',
            style: TextStyle(
              color: Colors.black,
              fontWeight: FontWeight.bold
            )
          ),
          Padding(padding: EdgeInsets.only(right: 20.0)),
          GestureDetector(
            onTap: () => showComments(
              context,
              postId: postId,
              ownerId: ownerId,
              mediaUrl: mediaUrl
            ),
            child: Icon(
              Icons.chat,
              size: 28.0,
              color: Colors.blue[900]
            )
          ),
          Padding(padding: EdgeInsets.only(right: 5.0)),
          Text(
            '$commentCount comments',
            style: TextStyle(
              color: Colors.black,
              fontWeight: FontWeight.bold
            )
          )
        ],
      ),
      Padding(
        padding: EdgeInsets.only(
          top: mediaUrl.length > 0 && caption.isNotEmpty ? 10.0 : 0.0
        )
      ),
      mediaUrl.length > 0 && caption.isNotEmpty ? Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(left: 20.0),
            child: Text(
              '$username ',
              style: TextStyle(
                color: Colors.black,
                fontWeight: FontWeight.bold
              )
            )
          ),
          Expanded(child: Row(children: buildCaption()))
        ],
      ) : timeWidget(),
      mediaUrl.length > 0 && caption.isNotEmpty ? timeWidget() : Text('')
    ],
  );
}

Answer 1

        Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Expanded(
              child: RichText(
                text: TextSpan(
                  children: caption.split(' ').map(
                    (item) {
                      if (item.contains('#')) {
                        return TextSpan(
                          text: '$item ',
                          recognizer: new TapGestureRecognizer()
                            ..onTap = () => print('hashtag$item'),
                          style: TextStyle(color: Colors.blue),
                        );
                      } else if (item.contains('.')) {
                        return TextSpan(
                          text: '$item ',
                          recognizer: new TapGestureRecognizer()
                            ..onTap = () => print('https://www.$item'),
                          style: TextStyle(color: Colors.blue),
                        );
                      } else {
                        return TextSpan(
                          text: '$item ',
                        );
                      }
                    },
                  ).toList(),
                ),
              ),
            )
          ]
        )