颤振对齐问题

Question

我正在尝试对行中的文本和图像进行对齐，但是下面以错误的方式获取的是我添加的代码，我对此对齐感到困惑。

Widget containerWidget(String icon, String icontext, String text) {
  return Container(
      padding: EdgeInsets.all(7),
      decoration: BoxDecoration(
          border: Border.all(
            color: Colors.grey,
          ),
          borderRadius: BorderRadius.circular(40.0)),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(left: 5, bottom: 2),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    SvgPicture.asset(
                      icon,
                      height: 20.0,
                      width: 20.0,
                      allowDrawingOutsideViewBox: true,
                    ),
                    Padding(
                      padding: const EdgeInsets.only(top: 5, left: 10),

                      child: Text(
                        icontext,
                        style: TextStyle(color: const Color(0xFF449DF9)),
                      ),
                    )
                  ],
                ),
              ),
            ],
          ),
          Row(
            children: <Widget>[
              Text(text),
            ],
          )
        ],
      ));
}

我的输出如下：

我想要以下输出，但以某种方式无法获得它。

Answer 1

您应该将Rows包裹在Expanded内，并删除对齐方式mainAxisAlignment: MainAxisAlignment.start

赞

Widget containerWidget(String icon, String icontext, String text) {
  return Container(
    padding: EdgeInsets.all(7),
    decoration: BoxDecoration(
      border: Border.all(
        color: Colors.grey,
      ),
      borderRadius: BorderRadius.circular(40.0),
    ),
    child: Row(
      children: <Widget>[
        Expanded(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(left: 5, bottom: 2),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                   SvgPicture.asset(
                    icon,
                     height: 20.0,
                     width: 20.0,
                     allowDrawingOutsideViewBox: true,
                    ),
                    Padding(
                      padding: const EdgeInsets.only(top: 5, left: 10),
                      child: Text(
                        icontext,
                        style: TextStyle(color: const Color(0xFF449DF9)),
                      ),
                    )
                  ],
                ),
              ),
            ],
          ),
        ),
        Expanded(
          child: Row(
            children: <Widget>[
              Text(text),
            ],
          ),
        ),
      ],
    ),
  );
}

Answer 2

将mainAxisAlignment更改为 MainAxisAlignment.start ，然后将每个子级包裹在 Expanded

中

这样

 Widget containerWidget(String icon, String icontext, String text) {
    return Container(
        padding: EdgeInsets.all(7),
        decoration: BoxDecoration(
            border: Border.all(
              color: Colors.grey,
            ),
            borderRadius: BorderRadius.circular(40.0)),
        child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.only(left: 5, bottom: 2),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                        SvgPicture.asset(
                          icon,
                          height: 20.0,
                          width: 20.0,
                          allowDrawingOutsideViewBox: true,
                        ),
                        Padding(
                          padding: const EdgeInsets.only(top: 5, left: 10),
                          child: Text(
                            icontext,
                            style: TextStyle(color: const Color(0xFF449DF9)),
                          ),
                        )
                      ],
                    ),
                  ),
                ),
            Expanded(child: Text(text))
          ],
        ));
  }