flutter - 在行左对齐中颤动显示小部件

Question

我在一行中有 2 个小部件，并在 mainaxisalignment 中使用 SpaceBetween。问题是我需要在左侧显示第二个小部件

我的代码

   Row(
    mainAxisAlignment:
    MainAxisAlignment.spaceBetween,
    children: [
      RichText(
        text: new TextSpan(
          // Note: Styles for TextSpans must be explicitly defined.
          // Child text spans will inherit styles from parent
          style: new TextStyle(
            fontSize: 14.0,
            color: Colors.black,
          ),
          children: <TextSpan>[
            new TextSpan(
                text: 'ID : ',
                style: new TextStyle(
                    fontSize: 11,
                    fontFamily: 'PoppinsBold')),
            new TextSpan(
                text: ' ${widget.patientDetails['mrn']}',
                style: TextStyle(
                    fontSize: 11,
                    fontFamily: 'PoppinsRegular',
                    color: textGreyColor)),
          ],
        ),
      ),
      RichText(
        text: new TextSpan(
          // Note: Styles for TextSpans must be explicitly defined.
          // Child text spans will inherit styles from parent
          style: new TextStyle(
            fontSize: 14.0,
            color: Colors.black,
          ),
          children: <TextSpan>[
            new TextSpan(
                text: 'Age : ',
                style: new TextStyle(
                    fontSize: 11,
                    fontFamily: 'PoppinsBold')),
            new TextSpan(
                text: '${widget.patientDetails['age']}',
                style: TextStyle(
                    fontSize: 11,
                    fontFamily: 'PoppinsRegular',
                    color: textGreyColor)),
          ],
        ),
      )
    ])

我面临的问题是这个

我需要使用 spaceBetween must 因为如果我的数据长度增加，它会自动出现在左侧。但如果长度较短，我需要在左侧显示

标签： flutterdart

Answer 1

只需将 RichText 包装在一个屏幕大小为一半的容器内

Row(

              children: [
                Container(width: MediaQuery.of(context).size.width/2,
                  padding:const EdgeInsets.only(left: 10),
                  alignment: Alignment.centerLeft,
                  child: RichText(
                    text:  TextSpan(
                      // Note: Styles for TextSpans must be explicitly defined.
                      // Child text spans will inherit styles from parent
                      style:  TextStyle(
                        fontSize: 14.0,
                        color: Colors.black,
                      ),
                      children: <TextSpan>[
                        TextSpan(
                            text: 'ID : ',
                            style:  TextStyle(
                                fontSize: 11,
                                fontFamily: 'PoppinsBold')),
                        TextSpan(
                            text: 'mrn0987654234567',
                            style: TextStyle(
                                fontSize: 11,
                                fontFamily: 'PoppinsRegular',
                                color: textGreyColor)),
                      ],
                    ),
                  ),
                ),

                    Container(width: MediaQuery.of(context).size.width/2,
                      alignment: Alignment.centerLeft,
                      padding: EdgeInsets.only(left: 10),
                  child: RichText(
                    text:  TextSpan(
                      // Note: Styles for TextSpans must be explicitly defined.
                      // Child text spans will inherit styles from parent
                      style:  TextStyle(
                        fontSize: 14.0,
                        color: Colors.black,
                      ),
                      children: <TextSpan>[
                        TextSpan(
                            text: 'Age : ',
                            style:  TextStyle(
                                fontSize: 11,
                                fontFamily: 'PoppinsBold')),
                        TextSpan(
                            text: 'age124567898765',
                            style: TextStyle(
                                fontSize: 11,
                                fontFamily: 'PoppinsRegular',
                                color: textGreyColor)),
                      ],
                    ),
                  ),
                )
              ]),

Ao ka nor a masla we no owaya