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

Question

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

代码如下：

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 属性放置窗口小部件，因为操作实际上将包装在ButtonBar中并放在右下角。 / p>

因此，可以使用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);
    }
  }
}