如何在一个共同的起点在不同的行中对齐我的文本

Posted 2023-02-23

【中文标题】如何在一个共同的起点在不同的行中对齐我的文本

【英文标题】：How do I align my text in flutter in different rows at a common start point

【发布时间】：2020-03-06 00:45:15

【问题描述】：

我希望你们一切都好。这是我的第一个 Flutter 项目，想请教各位大神。

This is my current layout but I would like to align the 3 rows of text label and the star rating

对不起，我还有 2 个问题

如何在第一个星级和文本字段之间留出空间？

有没有办法创建更大的文本字段？我试过高度，但它并没有使场地变大。

谢谢你们，希望你们有美好的一天:)

这是我当前的代码：

 @override
  Widget build(BuildContext context) 
    return Scaffold(
        body: Form(
            key: _formKey,
            child: Container(
                padding: EdgeInsets.all(30),
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      SizedBox(height: 100),
                      new TextFormField(
                        style: new TextStyle(
                          height: 1.0,
                        ),
                        validator: (value) 
                          if (value.isEmpty) 
                            return 'Field can\'t be empty!';
                          
                          return null;
                        ,
                        onSaved: (value) => _feedback = value,
                        decoration: new InputDecoration(
                            labelText: "Enter Message",
                            fillColor: Colors.white),
                        keyboardType: TextInputType.text,
                      ),
                      new Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        // crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text(
                            "AACCDDEE",
                            textAlign: TextAlign.center,
                            style: TextStyle(fontWeight: FontWeight.w600, fontSize: 20),
                          ),
                          StarRating(
                            rating: safetyrating,
                            starConfig: StarConfig(
                              size: 30.0,
                            ),
                            onChangeRating: (int rating) 
                              setState(() 
                                this.safetyrating = rating.toDouble();
                              );
                            ,
                          )
                        ],
                      ),

                      new Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          Text(
                            "B",
                            textAlign: TextAlign.center,
                            style: TextStyle(fontWeight: FontWeight.w600, fontSize: 20),
                          ),
                          StarRating(
                            rating: speedrating,
                            starConfig: StarConfig(
                              size: 30.0,
                            ),
                            onChangeRating: (int rating) 
                              setState(() 
                                this.speedrating = rating.toDouble();
                              );
                            ,
                          )
                        ],
                      ),

                      new Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          Text(
                            "AAS",
                            textAlign: TextAlign.center,
                            style: TextStyle(fontWeight: FontWeight.w600, fontSize: 20),
                          ),
                          StarRating(
                            rating: enjoymentrating,
                            starConfig: StarConfig(
                              size: 30.0,
                            ),
                            onChangeRating: (int rating) 
                              setState(() 
                                this.enjoymentrating = rating.toDouble();
                              );
                            ,
                          )
                        ],
                      ),
                      new Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          RaisedButton(
                            child: Text('SUBMIT'),
                            // height: 50.0,
                            // minWidth: 150.0,
                            color: Colors.blueGrey,
                            splashColor: Colors.black,
                            textColor: Colors.black,
                            // child: new Icon(FontAwesomeIcons.signInAlt),
                            onPressed: feedback,
                          ),
                        ],
                      ),
                    ],
                  ),
                ))));
  

【参考方案1】：

在我看来，唯一可能的变体是创建以下结构：

Container:
    Row:
        Column with title,
        Column with stars,

然后对每一列进行对齐。

编辑：

或者您可以将固定宽度设置为文本容器或星形容器，然后设置对齐

也祝你有美好的一天:)

【参考方案2】：

为了对齐，我建议使用 2 列的行而不是 3 行。

Row(
   children: [
      Column(
         children: [
             //TextFormFields
         ]
      ),
      Column(
         children: [
          //StarRating
         ]
      )
    ]
)

关于高度，如果您需要多行，请按照此answer。 如果没有，请使用decoration 属性。