Question

图像包含一列两个文本小部件，它们与图标居中对齐。但是我希望两行文本的列都...在中心x轴（图标的中心）上方有一行文本，在下方有一行。

这是我的代码。

               Row(
                    mainAxisSize: MainAxisSize.max,
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: <Widget>[
                      Column(
                        mainAxisSize: MainAxisSize.max,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[
                          SvgPicture.asset('assets/icon/but_headphones_${widget.pillarColorNames[program.pillar-1]}.svg',height: 60,),
                        ],
                      ),
                      Expanded(
                          child: Container(
                            padding: EdgeInsets.symmetric(horizontal: 10),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              mainAxisSize: MainAxisSize.max,
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                Text(session.name.toUpperCase(), style: Theme.of(context).textTheme.headline.merge(TextStyle(color: widget.pillarCollors[program.pillar-1])),),
                                Text(session.description, style: Theme.of(context).textTheme.body1,),
                              ],
                            ),
                          )
                      ),
                      Container(
                        child: Text(duration, style: TextStyle(fontSize: 12, color: Color.fromRGBO(170, 170, 170, 1)),),
                      ),
                    ],
                  ),

编辑：更新代码以反映图像

Answer 1

您是否尝试过将文本列mainAxisAlignment设置为spaceBetween？

mainAxisAlignment: MainAxisAlignment.spaceBetween

因此您的代码将如下所示：

Expanded(
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Text(session.name.toUpperCase(), style: Theme.of(context).textTheme.headline.merge(TextStyle(color: widget.pillarCollors[program.pillar-1])),),
            Text(session.description, style: Theme.of(context).textTheme.body1,),
          ],
        ),
      )
),

另一种解决方案是将每个文本小部件放在单独的行中，然后在行之间放置一个SizedBox。这样，您可以手动设置SizedBox的高度以匹配行之间想要的空间。

如何将一列2个文本窗口小部件排成行的中心x轴的两侧

1 个答案: