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

时间:2021-06-19 09:49:49

标签: flutter dart

我在一行中有 2 个小部件,并在主轴对齐中使用 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)),
          ],
        ),
      )
    ])

我面临的问题是这个

enter image description here

我必须使用 spaceBetween ,因为如果我的数据长度增加,它会自动出现在左侧。但是如果长度小于我需要在左边显示

1 个答案:

答案 0 :(得分:0)

只需将 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 也不是 masla we no owaya enter image description here