How to position a Widget at the bottom of a SingleChildScrollView?

问题

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)

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()
                ])));
  });

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

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

回答1:

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.

working Code:

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'),
                    )
                  ])),
        )

来源：https://stackoverflow.com/questions/55067288/how-to-position-a-widget-at-the-bottom-of-a-singlechildscrollview

标签

Flutter

flutter-layout