Question

“对齐”小部件给了我奇怪的对齐方式。所以我创建了FlatButtons，它们应该在蓝色容器的右下角和右下角对齐。但是他们并没有达到理想的位置。红色代表支架，蓝色代表容器

问题：[https://i.stack.imgur.com/Jmo5K.png]

完整代码：

Padding(
    padding: EdgeInsets.symmetric(vertical: 5,horizontal: 10),
    child: Container(
      color: Colors.blue,
      height: 1000,
      child: SingleChildScrollView(
        child: Column(
          children: <Widget>[

            //Choose feedback type
            Align(
              alignment: Alignment.topLeft,
              child: DropdownButton<String>(
                value: dropdownValue,
                hint: Text('Feedback type'),
                icon: Icon(Icons.arrow_downward),
                iconSize: 15,
                elevation: 16,
                style: TextStyle(color: Colors.blue),
                onChanged: (String newvalue){
                  setState(() {
                    dropdownValue = newvalue;
                  });
                },
                items: <String>['Suggestion','Problem'].map<DropdownMenuItem<String>>((String value) {
                  return DropdownMenuItem<String>(
                    value: value,
                    child: Text(value),
                  );
                }).toList(),
              ),
            ),

            SizedBox(height: 20,),

            // Input feedback
            TextFormField(
              maxLines: 13,
              maxLength: 700,
              textAlign: TextAlign.left,
              initialValue: 'Please keep suggestions and problems separate.',
              decoration: InputDecoration(
                fillColor: Colors.white,
                labelText: "Feedback here",
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10)
                  ),
              ),
              validator: (val){
                if(val.length < 20){
                  return "Feeback too short";
                }else{
                  return null;
                }
              },
            ),
            // cancel
            Align(
              alignment: Alignment.bottomLeft,
              child: FlatButton(
                onPressed: (){Navigator.of(context).pop();},
                child: Text('Cancel')
              ),
            ),

            // Submit
            Align(
              alignment: Alignment.bottomRight,
              child: FlatButton(
                onPressed: (){Navigator.of(context).pop();},
                child: Text('Submit')
              ),
            ),

          ],
        ),
      ),
    ),
  ),
);
}
}

Answer 1

您应该使用一行来对齐按钮，如下所示：

Column(
  children: <Widget>[

    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween
      children: [
        // cancel
        Align(
          alignment: Alignment.bottomLeft,
          child: FlatButton(
            onPressed: (){Navigator.of(context).pop();},
            child: Text('Cancel')
          ),
        ),

        // Submit
        Align(
          alignment: Alignment.bottomRight,
          child: FlatButton(
            onPressed: (){Navigator.of(context).pop();},
            child: Text('Submit')
          ),
        ),
      ]
    )

  ],
)

Answer 2

您可以使用ButtonBar，可以配置按钮周围的空间和对齐方式。

ButtonBar(
      alignment: MainAxisAlignment.spaceBetween,
      mainAxisSize: MainAxisSize.max,
      buttonTextTheme: ButtonTextTheme.normal,
      children: <Widget>[
        FlatButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            child: Text('Cancel')),
        FlatButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            child: Text('Submit')),
      ],
    ),

Flutter：如何在容器内对齐小部件

2 个答案: