当有SingleChildScrollView时,如何在flutter中调整屏幕底部的按钮?

问题描述 投票:0回答:2

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

下面是我的代码。

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),
            ),
          ),
        ]),
      ),
    ),
  ),
flutter dart flutter-layout
2个回答
2
投票

在脚手架小部件内添加底板

脚手架(bottomSheet:submitButton(),主体:formWidget())


0
投票

如果您不想使用脚手架中的bottomSheet,还有其他选择,

Column(
    mainAxisSize: mainAxisSize.max,
    children:[
        Expanded(child: SingleChildScrollView(child: .....),),
        Button()
    ]
)
© www.soinside.com 2019 - 2024. All rights reserved.