flutter - 如何在 google flutter 中对齐行中的文本小部件？

Question

我正在尝试对齐列中的多个行文本(一个数字，一个小填充，后跟所述文本)，但不知道如何实现它。

我已经尝试了 rows 属性中的每个 MainAxisAlignment 设置。

这个屏幕截图应该可以澄清我的问题:左侧是模型以及它应该是什么样子，右侧是 flutter 中的当前状态。 我希望文本与我添加的绿线对齐以可视化我的问题(因此第一个文本需要从右侧开始一点)。

我的代码:

Widget singleStep(BuildContext context, int numToPrint, String text,
    {String fineprint = ""}) {
  return Padding(
      padding: EdgeInsets.only(
          bottom: 0.023 * getScreenHeight(context),
          left: 0.037 * getScreenWidth(context)),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          RichText(
              text: TextSpan(children: <TextSpan>[
            TextSpan(
                text: "#",
                style: GoZeroTextStyles.regular(_NUMBERFONTSIZE,
                    color: GoZeroColors.green)),
            TextSpan(
                text: numToPrint.toString(),
                style: GoZeroTextStyles.regular(_NUMBERFONTSIZE))
          ])),
          Padding(
              padding: EdgeInsets.only(left: 0.017 * getScreenWidth(context)),
              child: RichText(
                  text: TextSpan(
                      style: GoZeroTextStyles.regular(_TEXTSIZE),
                      children: <TextSpan>[
                    TextSpan(text: text + "\n"),
                    TextSpan(
                        text: fineprint,
                        style: GoZeroTextStyles.regular(_FINEPRINTSIZE))
                  ])))
        ],
      ));
}

所有步骤都包装在一个列中，该列是堆栈的子级。

我们很乐意提供建议。另外，如果您有任何其他改进代码的建议，请随时发表评论:)

提前谢谢您!

干杯， 大卫

Answer 1

@override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.white,
        padding: EdgeInsets.all(10),
        child: Column(children: [
          Expanded(
              flex: 4,
              child: Container(
                alignment:Alignment.center,
                  decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      border: Border.all(color: Colors.grey, width: 1.0)),
              child:Text('I\'m in Circle',textAlign: TextAlign.center,
                    style: TextStyle(
                        fontSize: 19,
                        fontWeight: FontWeight.bold,
                        color: Colors.black)))),
          SizedBox(height: 15),
          Text('Title',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        fontSize: 19,
                        fontWeight: FontWeight.bold,
                        color: Colors.black)),
          SizedBox(height: 10),
          Expanded(
              flex: 3,
            //Use listview instead of column if there are more items....
              child: Column(
                mainAxisAlignment:MainAxisAlignment.spaceEvenly,
                children: [
                Row(children: [
                  Padding(
                    padding:
                        const EdgeInsets.symmetric(vertical: 8, horizontal: 15),
                    child: Text('#1',
                        style: TextStyle(
                            fontSize: 17,
                            fontWeight: FontWeight.bold,
                            color: Colors.green)),
                  ),
                  Text('Your text goes here.......\nSecond line',
                      style: TextStyle(
                          fontSize: 17,
                          fontWeight: FontWeight.bold,
                          color: Colors.black)),
                ]),
                Row(children: [
                  Padding(
                    padding:
                        const EdgeInsets.symmetric(vertical: 8, horizontal: 15),
                    child: Text('#2',
                        style: TextStyle(
                            fontSize: 17,
                            fontWeight: FontWeight.bold,
                            color: Colors.green)),
                  ),
                  Text('Your text goes here.......\nSecond line',
                      style: TextStyle(
                          fontSize: 17,
                          fontWeight: FontWeight.bold,
                          color: Colors.black)),
                ]),
                Row(
                  children: [
                  Padding(
                    padding:
                        const EdgeInsets.symmetric(vertical: 8, horizontal: 15),
                    child: Text('#3',
                        style: TextStyle(
                            fontSize: 17,
                            fontWeight: FontWeight.bold,
                            color: Colors.green)),
                  ),
                  Text('Your text goes here.......\nSecond line',
                      style: TextStyle(
                          fontSize: 17,
                          fontWeight: FontWeight.bold,
                          color: Colors.black)),
                ])
              ]))
        ]));
  }