Flutter：如何對齊容器內的小部件

Question

Align 小部件給了我奇怪的對齊方式。 所以我創建了應該在藍色容器的右下角和右下角對齊的 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 ，您可以配置按鈕周圍的空間和 alignment。

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')),
      ],
    ),