时间戳

首页 > 解决方案 > 如何在 Flutter 中将文本与左侧对齐

flutter - 如何在 Flutter 中将文本与左侧对齐

问题描述

我正在尝试复制设计，但我不确定如何使我的所有文本像设计而不是中心一样向左对齐，但不知道该怎么做，所以如果可以的话，我将不胜感激获得帮助或建议。

            Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(10),
                    bottomRight: Radius.circular(10)),
                color: Theme.of(context).primaryColor,
              ),
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 10),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    (widget.tileItems.length < 0)
                        ? null
                        : infoWidget(widget.tileItems[0]),
                    verticalBarSeparator(widget.tileItems[1].middleText),
                    (widget.tileItems.length < 1)
                        ? null
                        : tileWidget(widget.tileItems[1]),
                    verticalBarSeparator(widget.tileItems[2].middleText),
                    (widget.tileItems.length < 2)
                        ? null
                        : tileWidget(widget.tileItems[2]),
                    verticalBarSeparator(widget.tileItems[3].middleText),
                    (widget.tileItems.length < 3)
                        ? null
                        : tileWidget(widget.tileItems[3])
                  ],
                ),
              ),
            )



  Widget tileWidget(TileItem item) {
    return Padding(
      padding: EdgeInsets.symmetric(vertical: 15, horizontal: 10),
      child: Column(
        children: <Widget>[
          Text(item.topText, style: Theme.of(context).textTheme.h10),
          SizedBox(height: 5),
          Text(item.middleText),
          SizedBox(height: 5),
          Text(item.bottomText,
              style: TextStyle(
                color: int.parse(item.middleText) < 0
                    ? Color.fromRGBO(225, 0, 0, 1)
                    : Color.fromRGBO(67, 188, 72, 1),
              ))
        ],
      ),
    );
  }

标签： flutterdartmobileflutter-layoutflutter-animation

解决方案

尝试将列的 crossAxisAlignment 设置为左​​，它应该可以工作。如果未更改默认值，则 Column 将内容设置为中心。试试下面的代码。

 Widget tileWidget(TileItem item) {
return Padding(
  padding: EdgeInsets.symmetric(vertical: 15, horizontal: 10),
  child: Column(
        crossAxisAlignment: CrossAxisAlignment.left,
    children: <Widget>[
      Text(item.topText, style: Theme.of(context).textTheme.h10),
      SizedBox(height: 5),
      Text(item.middleText),
      SizedBox(height: 5),
      Text(item.bottomText,
          style: TextStyle(
            color: int.parse(item.middleText) < 0
                ? Color.fromRGBO(225, 0, 0, 1)
                : Color.fromRGBO(67, 188, 72, 1),
          ))
    ],
  ),
);
}

推荐阅读