Question

我有以下两个小部件：

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属性，但是我不知道如何合并这两个。

Answer 1

您应该使用Row小部件，这是什么问题？

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

提示：颤振团队建议使用小部件Offstage而不是创建空的Container，例如：

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,
        ),
     ),
),

Answer 2

如果我理解您的问题，您想将这两个文本并排放置，看看：

Row(
  children: <Widget>[
     Text('Completed Purchases'),
     Text('Refunds'),
  ]
)

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

2 个答案: