如何在 Flutter 中将文本与左侧对齐答案

【问题标题】：How to align text to left side in Flutter如何在 Flutter 中将文本与左侧对齐
【发布时间】：2021-04-10 14:40:50
【问题描述】：

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

            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),
              ))
        ],
      ),
    );
  }

【问题讨论】：

将Column 小部件的crossAxisAlignment 设置为CrossAxisAlignment.left

标签： flutter dart mobile flutter-layout flutter-animation

【解决方案1】：

首先将您的verticalBarSeparator 和tileWidget 包装在Row 中，并带有Alignment start：

                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    (widget.tileItems.length < 0)
                        ? null
                        : infoWidget(widget.tileItems[0]),
Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    verticalBarSeparator(widget.tileItems[1].middleText),
                    (widget.tileItems.length < 1)
                        ? null
                        : tileWidget(widget.tileItems[1]),
],),
Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    verticalBarSeparator(widget.tileItems[2].middleText),
                    (widget.tileItems.length < 2)
                        ? null
                        : tileWidget(widget.tileItems[2]),
],),
Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    verticalBarSeparator(widget.tileItems[3].middleText),
                    (widget.tileItems.length < 3)
                        ? null
                        : tileWidget(widget.tileItems[3])
],),
                  ],
                ),

其次，让你的 tileWidget 列主并交叉对齐，如下所示：

Widget tileWidget(TileItem item) {
    return Padding(
      padding: EdgeInsets.symmetric(vertical: 15, horizontal: 10),
      child: Column(
crossAxisAlignment: CrossAxisAlignment.left,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[

【讨论】：

【解决方案2】：

尝试将列的 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),
          ))
    ],
  ),
);
}

【讨论】：