Question

我希望你们一切都好。这是我第一个扑扑的项目，我想寻求你们的指导。

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

Answer 1

我认为，唯一可能的变体是创建以下结构：

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

然后对齐每一列。

编辑：

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

也有美好的一天：）

Answer 2

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

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

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

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

2 个答案: