对齐警报对话框按钮栏小部件

Question

我是 Flutter 的新手，所以我正在尝试创建一个显示警报对话框的小部件。在警报对话框的内容中，我得到了 SingleChildScrollView，在所谓的按钮栏中，我有一个文本、复选框和一个按钮，我想对齐它们（将带有文本的复选框放在左侧，按钮放在右侧），但我不知道怎么做。尝试扩展和灵活，还尝试插入将 mainAxisAlignment 设置为 spaceEvenly 的行，不工作，有人可以帮我吗？

代码如下：

class TermsAndConditionsAlertDialog extends StatefulWidget {
  TermsAndConditionsAlertDialogState createState() {
    return new TermsAndConditionsAlertDialogState();
  }
}

class TermsAndConditionsAlertDialogState
    extends State<TermsAndConditionsAlertDialog> {
  static bool _isChecked = false;

  //TODO get the terms and conditions message
  static final String _TERMS_AND_CONDITIONS_MESSAGE =
      'blablabla this is a terms and conditions message and a blablababl and a bla bla and a aaaaaaaaaaaa bla';
  static final String _DIALOG_TITLE = 'Terms and Conditions';

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new AlertDialog(
      title: new Text(_DIALOG_TITLE),
      content: new SingleChildScrollView(
        child: new Text(
          _TERMS_AND_CONDITIONS_MESSAGE,
          style: new TextStyle(fontSize: 50.0),
        ),
      ),
      actions: <Widget>[
        new Text('Accept'),
        new Checkbox(
//          title: Text('Accept'),

          value: _isChecked,
          onChanged: (bool newValue) {
            setState(() {
              _isChecked = newValue;
            });
          },
        ),
        new RaisedButton(
            onPressed: () {
              _printDialogResult();
              _closeDialog();
              //TODO add a method to move on with an app

            },
            child: new Text(
              'Start',
              style: TextStyle(color: Colors.white),
            )),
      ],
    );
  }

  void _printDialogResult() {
    //simply prints the result in console
    print('You selected 1');
  }

  void _closeDialog() {
    if (_isChecked) {
      Navigator.pop(context);
    }
  }
}[FL][1]

Answer 1

您希望使用 content 属性来放置小部件，因为 actions 实际上会被包裹在 ButtonBar 中并放置在右下角。

因此，一种解决方案可能是使用Column 拆分对话框的内容，让SingleChildScrollView 展开以填充视口，并将带有所需小部件的Row 与mainAxisAlignment: MainAxisAlignment.spaceBetween, 放在底部。由于您还想将Text 和CheckBox 分组，因此另一个Row 将完成将两者聚集在一起的工作。

我已经编辑了您的示例，因此您可以自己复制/粘贴并尝试/调整它。这将产生以下结果。

class TermsAndConditionsAlertDialog extends StatefulWidget {
  TermsAndConditionsAlertDialogState createState() {
    return new TermsAndConditionsAlertDialogState();
  }
}

class TermsAndConditionsAlertDialogState extends State<TermsAndConditionsAlertDialog> {
  static bool _isChecked = false;

  static final String _TERMS_AND_CONDITIONS_MESSAGE =
      'blablabla this is a terms and conditions message and a blablababl and a bla bla and a aaaaaaaaaaaa bla';
  static final String _DIALOG_TITLE = 'Terms and Conditions';

  @override
  Widget build(BuildContext context) {
    return new AlertDialog(
      title: new Text(_DIALOG_TITLE),
      content: new Column(
        children: <Widget>[
          new Expanded(
            child: new SingleChildScrollView(
              child: new Text(
                _TERMS_AND_CONDITIONS_MESSAGE,
                style: new TextStyle(fontSize: 50.0),
              ),
            ),
          ),
          new Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              new Row(
                children: <Widget>[
                  new Text('Accept'),
                  new Checkbox(
                    value: _isChecked,
                    onChanged: (bool newValue) {
                      setState(() {
                        _isChecked = newValue;
                      });
                    },
                  ),
                ],
              ),
              new RaisedButton(
                  onPressed: () {
                    _printDialogResult();
                    _closeDialog();
                  },
                  child: new Text(
                    'Start',
                    style: TextStyle(color: Colors.white),
                  )),
            ],
          ),
        ],
      ),
    );
  }

  void _printDialogResult() {
    print('You selected 1');
  }

  void _closeDialog() {
    if (_isChecked) {
      Navigator.pop(context);
    }
  }
}