Flutter：当没有 link 时，如何显示没有 space 的小部件？

Question

代码说明：我检查是否有link到youtube然后显示youtube的图标否则什么都不显示。

问题：但是在我下面的代码中，我添加了一个空容器（），但是这个容器在我的行中占据了一席之地。

Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        child: Row(
                          children: [
                            
                            Text("Social Media : "),
                          ],
                        ),
                      ),
                      _youtubelink == null
                          ? Container()
                          : GestureDetector(
                              child: Icon(
                                FontAwesome5.youtube,
                                color: red,
                              ),
                              onTap: () {
                                _launchURL(_youtubelink);
                              },
                            ),
                      _istagramlink == null
                          ? Container()
                          : GestureDetector(
                              child: Icon(
                                FontAwesome5.instagram,
                                color: red,
                              ),
                              onTap: () {
                                _launchURL(_istagramlink);
                              },
                            ),
                      _facebooklink == null
                          ? Container()
                          : GestureDetector(
                              child:
                                  Icon(FontAwesome5.facebook, color: blue),
                              onTap: () {
                                _launchURL(_facebooklink);
                              },
                            ),
                      _twitterlink == null
                          ? Container()
                          : GestureDetector(
                              child: Icon(FontAwesome5.twitter,
                                  color: lightyellow),
                              onTap: () {
                                _launchURL(_twitterlink);
                              },
                            ),
                      Container(), // to let a space between edge and icons
                    ],
                  )

image when there's a link

当没有 link 时，如何显示没有 space 拍摄的小部件？谢谢

Answer 1

如果我答对了你的问题，而不是使用三元运算符来显示空容器的 link，你可以简单地将 if 放在你的列表中 (collection if):

基本上，你的代码会变成这样：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Container(
      child: Row(
        children: [
          
          Text("Social Media : "),
        ],
      ),
    ),
    if(_youtubelink != null)
          GestureDetector(
            child: Icon(
              FontAwesome5.youtube,
              color: red,
            ),
            onTap: () {
              _launchURL(_youtubelink);
            },
          ),
    if(_istagramlink != null)
          GestureDetector(
            child: Icon(
              FontAwesome5.instagram,
              color: red,
            ),
            onTap: () {
              _launchURL(_istagramlink);
            },
          ),
    if(_facebooklink != null)
          GestureDetector(
            child:
                Icon(FontAwesome5.facebook, color: blue),
            onTap: () {
              _launchURL(_facebooklink);
            },
          ),
    if(_twitterlink != null)
          GestureDetector(
            child: Icon(FontAwesome5.twitter,
                color: lightyellow),
            onTap: () {
              _launchURL(_twitterlink);
            },
          ),
    Container(), // to let a space between edge and icons
  ],
)

您可以在 https://dart.dev/guides/language/language-tour#lists 中了解更多相关信息。

Flutter：当没有 link 时，如何显示没有 space 的小部件？

Flutter : How can I show no widget with no space taking when there's no link?

row

widget

flutter