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

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展开以填充视口(viewport)并放置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);
    }
  }
}