Question

这是我的代码，我在SingleChildScrollView中添加了一些TextFormField，然后尝试在屏幕的底部中心放置一个按钮，不允许使用Expend，当文本进行某些输入时，FloatActionButton将随键盘移动，任何解决方法吗？ / p>

body: SafeArea(
        child: SingleChildScrollView(
          padding: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              const SizedBox(height: 24.0),
              TextFormField(
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  hintText: 'tell me some detail',
                  helperText: 'description'
                ),
                maxLines: 4,
                maxLength: 200,
                textInputAction: TextInputAction.done,
              ),
              const SizedBox(height: 48.0),
              TextField(
                decoration: InputDecoration(
                  hintText: 'your name here',
                  helperText: 'name'
                ),
              ),
              Flexible(
                fit: FlexFit.loose,
                child: RaisedButton(
                  onPressed: (){},
                  child: Text('Submit'),
                ),
              )
            ],
          ),
        ),
      ),

Could I move the button at the right place

Answer 1

我不会尝试破译您的代码，但是您可以将按钮包装在“扩展列”中，并将MainAxisAlignment列设置为结束

Answer 2

尝试一下

@override
Widget build(BuildContext context) {
  return SafeArea(
    child: Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          const SizedBox(height: 24.0),
          TextFormField(
            decoration: InputDecoration(border: OutlineInputBorder(), hintText: 'tell me some detail', helperText: 'description'),
            maxLines: 4,
            maxLength: 200,
            textInputAction: TextInputAction.done,
          ),
          const SizedBox(height: 48.0),
          TextField(decoration: InputDecoration(hintText: 'your name here', helperText: 'name')),
          Spacer(),
          RaisedButton(
            onPressed: () {},
            child: Text('Submit'),
          )
        ],
      ),
    ),
  );
}

Answer 3

SingleChildScrollView的问题在于shrikwrap是孩子。因此，要在两者之间使用自动尺寸小部件-我们需要使用MediaQuery来获取屏幕height和SizedBox来展开-SingleChildScrollView。

此处按钮位于屏幕底部。

工作代码：

double height = MediaQuery.of(context).size.height;
    return Scaffold(
      body: SingleChildScrollView(
        padding: EdgeInsets.symmetric(horizontal: 16,),
        child: SizedBox(
          height: height,
          child: Column(
            children: <Widget>[
              const SizedBox(height: 24.0),
              TextFormField(
                decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    hintText: 'tell me some detail',
                    helperText: 'description'),
                maxLines: 4,
                maxLength: 200,
                textInputAction: TextInputAction.done,
              ),
              const SizedBox(height: 28.0),
              TextField(
                decoration: InputDecoration(
                    hintText: 'your name here', helperText: 'name'),
              ),
              Spacer(),
              TextField(
                decoration: InputDecoration(
                    hintText: 'your name here', helperText: 'name'),
              ),
              RaisedButton(
                onPressed: () {},
                child: Text('Submit'),
              )
            ],
          ),
        ),
      ),
    );

输出：

如何将按钮放置在屏幕的底部中心？

3 个答案: