如何在谷歌颤动中对齐文本小部件？

Question

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

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

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

我的代码：

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

所有步骤都封装在一个列中，该列是 Stack 的子级。

非常感谢您的建议。另外，如果您有任何其他改进代码的建议，请随时发表评论:)

提前谢谢你！

干杯， 大卫

Answer 1

我希望我能很好地理解你。有一些建议可以解决您的问题：

考虑在 RichText 小部件之前添加 SizedBox(width:20.0) 以实现模型中的对齐。

看起来您想让所有 Text 小部件居中。考虑添加中心小部件，以便它们在列或行的中心对齐。

Answer 2

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

Answer 3

我的建议是从 Widget singleStep 返回 Container 而不是 Padding，并使用容器的属性 padding 来设置填充。

Screenshot

下面是一个使用 Container 的非常基本的代码 sn-p，我可以使用它在文本左侧添加填充：

void main() {
  runApp(
    MaterialApp(
      home: SafeArea(
        child: Scaffold(
          backgroundColor: Colors.white,
          body: Container(
            margin: EdgeInsets.only(top: 20.0),
            padding: EdgeInsets.only(
              left: 20.0,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Text(
                  "Hello World",
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.green,
                    fontSize: 20.0,
                  ),
                ),
                Text(
                  "Hello World",
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.green,
                    fontSize: 20.0,
                  ),
                ),
                Text(
                  "Hello World",
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.green,
                    fontSize: 20.0,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    ),
  );
}

希望这有帮助。