Flutter：当没有链接时，如何显示不占用空间的小部件？

Question

代码说明：我检查是否有指向 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
                    ],
                  )

有链接时的图像

有链接时的图像

当没有链接时，如何显示不占用空间的小部件？谢谢

Answer 1

collection if如果我的问题正确，您可以简单地将 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中了解更多信息。