如何将小部件放置在SingleChildScrollView的底部? [英] How to position a Widget at the bottom of a SingleChildScrollView?

问题描述

我需要使用SingleChildScrollView才能使用 keyboard_actions ，以便我可以在iOS的键盘上方放置一个完成"按钮(目前使用数字键盘)

I need to use SingleChildScrollView in order to be able to use keyboard_actions so that i can put a "Done" button on top of the keyboard in iOS (using a numeric keyboard at the moment)

SingleChildScrollView将有一列作为子元素，然后在底部放置一个按钮.我尝试使用LayoutBuilder将高度设置为SingleChildScrollView.

The SingleChildScrollView will have a column as a child and then a button to be placed at the bottom. I tried using LayoutBuilder to enforce a height to the SingleChildScrollView.

LayoutBuilder(
      builder: (BuildContext context, BoxConstraints viewportConstraints) {
    return SingleChildScrollView(
        child: ConstrainedBox(
            constraints:
                BoxConstraints(minHeight: viewportConstraints.maxHeight),
            child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                  Column(),
                  // Spacer() ?
                  FlatButton()
                ])));
  });

我尝试将BoxConstraints与maxHeight属性一起使用，但是最终当键盘出现时，该小部件不会消失.

I tried using the BoxConstraints with the maxHeight attribute, but ultimately the widget wouldn't scrooll up when the keyboard appeared.

侧面说明:脚手架将resizeToAvoidBottomInset和resizeToAvoidBottomPadding都设置为true(默认值)

Side note: the Scaffold has both resizeToAvoidBottomInset and resizeToAvoidBottomPadding set to true (the default value)

推荐答案

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

The issue with SingleChildScrollView is that it shrikwrap it's children. So to have auto size widget in between - we need to use MediaQuery to get the screen height & SizedBox to expand - SingleChildScrollView.

此处按钮将在屏幕底部.

Here Button will be at bottom of screen.

工作代码:

double height = MediaQuery.of(context).size.height;

    SingleChildScrollView(
          child: SizedBox(
              height: height,
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  mainAxisSize: MainAxisSize.max,
                  children: <Widget>[
                    Column(
                      children: <Widget>[
                        Text('Dummy'),
                        Text('Dummy'),
                        Text('Dummy'),
                      ],
                    ),
                    Spacer(),
                    FlatButton(
                      onPressed: () {},
                      child: Text('Demo'),
                    )
                  ])),
        ) 

这篇关于如何将小部件放置在SingleChildScrollView的底部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！