使用SingleChildScrollView时,如何在屏幕底部快速调整按钮?

时间:2020-11-04 18:38:45

标签: flutter dart flutter-layout

我想在底部添加调整我的按钮。 问题是,我正在使用单个ChildScrollView + Column。即使添加了spacer,它也会在小部件中占用无限量的空间。但是,它肯定可以与singleChildScrollView一起使用,但是会发生像素溢出错误。

I want to add adjust my button at the bottom

下面是我的代码。

body: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Form(
      key: _form,
      child: SingleChildScrollView(
        child: Column(children: <Widget>[
          //  Works in form only.
          //  We dont need focusNode or focusScope. Since we are in new version.
          TextFormField(
            decoration: InputDecoration(labelText: 'Title'),
            textInputAction: TextInputAction.next, //  Moves to next field.
            keyboardType: TextInputType.name,
            onSaved: (value) {
              _editedProduct = Product(
                id: null,
                title: value,
                description: _editedProduct.description,
                price: _editedProduct.price,
                imageUrl: _editedProduct.imageUrl,
              );
            },
          ),
          TextFormField(
            decoration: InputDecoration(labelText: 'Price (\$)'),
            textInputAction: TextInputAction.next, //  Moves to next field.
            keyboardType: TextInputType.number,
            onSaved: (value) {
              _editedProduct = Product(
                id: null,
                title: _editedProduct.title,
                description: _editedProduct.description,
                price: double.parse(value),
                imageUrl: _editedProduct.imageUrl,
              );
            },
          ),
          TextFormField(
            decoration: InputDecoration(labelText: 'Description'),
            maxLines: 3,
            //  Since we dont need to move to next control.
            // textInputAction: TextInputAction.next,            //  Moves to next field.
            keyboardType: TextInputType.multiline,
            onSaved: (value) {
              _editedProduct = Product(
                id: null,
                title: _editedProduct.title,
                description: value,
                price: _editedProduct.price,
                imageUrl: _editedProduct.imageUrl,
              );
            },
          ),
          Divider(),
          Row(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: <Widget>[
                Container(
                  width: 100,
                  height: 100,
                  margin: EdgeInsets.only(top: 8, right: 10),
                  decoration: BoxDecoration(
                      border: Border.all(
                    width: 1,
                    color: Colors.grey,
                  )),
                  child: Container(
                    child: _imageUrlController.text.isEmpty
                        ? Text('Enter a URL')
                        : FittedBox(
                            child: Image.network(_imageUrlController.text),
                            fit: BoxFit.fill,
                          ),
                  ),
                ),
                Expanded(
                  child: TextFormField(
                    decoration: InputDecoration(labelText: 'Image URL'),
                    keyboardType: TextInputType.url,
                    textInputAction: TextInputAction.done,
                    controller: _imageUrlController,
                    focusNode: _imageUrlFocusNode,
                    onFieldSubmitted: (value) => _submitForm(),
                    onSaved: (value) {
                      _editedProduct = Product(
                        id: null,
                        title: _editedProduct.title,
                        description: _editedProduct.description,
                        price: _editedProduct.price,
                        imageUrl: value,
                      );
                    },
                  ),
                ),
              ]),
          Container(
            width: double.infinity,
            height: 50,
            margin: EdgeInsets.all(5),
            padding: EdgeInsets.all(10),
            decoration: BoxDecoration(
                color: Theme.of(context).primaryColor,
                borderRadius: BorderRadius.all(Radius.circular(20))),
            child: FlatButton(
              child: Text(
                'Submit',
                // ignore: deprecated_member_use
                style: Theme.of(context).primaryTextTheme.title,
              ),
              onPressed: (_submitForm),
            ),
          ),
        ]),
      ),
    ),
  ),

2 个答案:

答案 0 :(得分:1)

在scafold小部件内添加底表

Scafold(bottomSheet:SubmitButton(),body:formWidget())

答案 1 :(得分:0)

如果您不想使用脚手架的bottomSheet,还有另一种选择,

Column(
    mainAxisSize: mainAxisSize.max,
    children:[
        Expanded(child: SingleChildScrollView(child: .....),),
        Button()
    ]
)
相关问题