flutter - 在Flutter中将小部件彼此相邻放置

标签 flutter dart flutter-layout

我有以下两个小部件:

Text('Completed Purchases'),
                  widget.user.profile.designation != ''

                      ? SizedBox(
                    // width: widget.screenSize.size.width * 0.45,
                          child: Text(
                            widget.user.profile.designation,
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                            style: GoogleFonts.ptSansNarrow(
                              color: Colors.grey,
                              fontSize: kTextHeading2FontSize,
                              fontWeight: FontWeight.w700,
                            ),
                          ),
                        )
                      : Container(),
Text('Refunds'),

                  widget.user.profile.designation != ''
                      ? SizedBox(
                          // width: widget.screenSize.size.width * 0.45,
                          child: Text(
                            widget.user.profile.designation,
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                            style: GoogleFonts.ptSansNarrow(
                              color: Colors.grey,
                              fontSize: kTextHeading2FontSize,
                              fontWeight: FontWeight.w700,
                            ),
                          ),
                        )

                      : Container(),
我想将它们排成一排。我知道flutter的row属性,但是我不知道如何合并这两个。

最佳答案

您应该使用Row小部件,这是什么问题?

Row(
   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
   mainAxisSize: MainAxisSize.max,
   crossAxisAlignment: CrossAxisAlignment.center,
   children: <Widget>[
       Text("Completed Purchases"),
       Text("Refunds")
   ]
),

TIP: The flutter team recommends to use the Widget Offstage instead of creating empty Container's, for example:

Offstage(
    offstage: widget.user.profile.designation == '',
    child: Text(
         widget.user.profile.designation,
         maxLines: 1,
         overflow: TextOverflow.ellipsis,
         style: GoogleFonts.ptSansNarrow(
              color: Colors.grey,
              fontSize: kTextHeading2FontSize,
              fontWeight: FontWeight.w700,
        ),
     ),
),

关于flutter - 在Flutter中将小部件彼此相邻放置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63394886/

相关文章:

Flutter:ListView 不滚动

android - 单击 flutter 中的底部按钮时在半屏中显示选项卡

flutter - 静态谷歌地图(禁用所有手势)

flutter - flutter_secure_storage 究竟是什么以及它是如何工作的?

google-maps - 点击谷歌地图标记时显示模态底部工作表

list - flutter 如何在初始化状态下使用 future 的异步方法

dart - 如何在抖动中缓存rxdart流以实现无限滚动

Dio改造子库的Flutter缓存机制

python - 如何使用 Starflut 在 Flutter 中导入 python 包?

flutter - 如何访问容器中具有字符串,整数和图像的列表(数组)