Flutter - SingleChildScrollView interfering in columns

前端 未结 2 1411
一生所求
一生所求 2021-01-17 10:47

I created a screen that works well with the columns, but I needed to scroll because of the keyboard.

When you insert the SingleChildScrollView or the

2条回答
  •  耶瑟儿~
    2021-01-17 10:55

    Follow the code below to register.

    MainAxisAlignment.spaceBetween has been replaced with dynamic padding, depending on screen size.

    import 'package:flutter/material.dart';
    import 'dart:ui' as ui;
    
    void main() {
      runApp(new MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return new MaterialApp(      
          home: new MyHomePage(),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      @override
      _MyHomePageState createState() => new _MyHomePageState();
    }
    
    class _MyHomePageState extends State {
      @override
      Widget build(BuildContext context) {
        final ui.Size logicalSize = MediaQuery.of(context).size;
        final double _height = logicalSize.height;
        return new Scaffold(
          appBar: new AppBar(backgroundColor: new Color(0xFF26C6DA)),        
          body: new SingleChildScrollView(
            child: new Column(
              //mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  new Container(
                    height: 300.0,
                    child: new Column(
                      children: [
                        new TextField(
                          decoration: const InputDecoration(
                            labelText: "Description",
                          ),
                          style: Theme.of(context).textTheme.title,
                        ),
                        new TextField(
                          decoration: const InputDecoration(
                            labelText: "Description",
                          ),
                          style: Theme.of(context).textTheme.title,
                        ),
                        new TextField(
                          decoration: const InputDecoration(
                            labelText: "Description",
                          ),
                          style: Theme.of(context).textTheme.title,
                        ),
                      ],
                    )
                  ),
                  new Container(
                    padding: new EdgeInsets.only(top: (_height - 450.0)),
                    margin: new EdgeInsets.only(bottom: 16.0),
                    child: new FloatingActionButton(
                      backgroundColor: new Color(0xFFE57373),
                      child: new Icon(Icons.check),
                      onPressed: (){}
                    ),
                  )
                ],
            ),
          )
        );
      }
    }
    

提交回复
热议问题