dart 如何将按钮添加到页面上具有TextField的页面的底部

bq3bfh9z  于 2023-02-27  发布在  其他
关注(0)|答案(1)|浏览(124)

目前,我在Flutter中有此页面:

不幸的是,当我单击textfield时,键盘显示出来,下一个按钮出现在键盘顶部,隐藏了textfield

我不太明白它为什么会这样。
这是我的代码:

import 'dart:ffi';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:jukebox/utils/ContainerImpl.dart';
import 'package:jukebox/utils/ElevatedButtonImpl.dart';
import 'package:jukebox/utils/TextImpl.dart';

class createAccount extends StatelessWidget {

  const createAccount({super.key});

  @override
  Widget build(BuildContext context) {

    ContainerImpl containerWidget = ContainerImpl(
        SingleChildScrollView(
          padding: const EdgeInsets.only(top: 120),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: const <Widget> [
              TextImpl("Créer ton profil"),
              SizedBox(height: 100),
              CircleAvatar(
                radius: 120,
                backgroundImage:NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg') ,
              ),
              TextField(
                autofocus: false,
                scrollPadding: EdgeInsets.only(bottom: 300),
                cursorColor: Color.fromRGBO(233, 165, 208, 1),
                maxLength: 15,
                textAlign: TextAlign.center,
                style: TextStyle(
                    color: Color.fromRGBO(233, 165, 208, 0.9),
                    fontSize: 40
                ),
                decoration: InputDecoration(
                    counterText: ""
                ),
              ),
            ],
          ),
        )
    );

    AppBar appBar = AppBar(
      backgroundColor: Colors.transparent,
      elevation: 0,
      leading: IconButton(
        icon: const Icon(Icons.arrow_back, color: Colors.white),

        onPressed: () => Navigator.of(context).pop(),
      ),
    );

    return Scaffold(
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: Container(
        height: 80,
        width: 350,
        margin: const EdgeInsets.all(10),
        child: ElevatedButtonImpl(onPressed: () => {}, text: "Next")
      ),
      extendBodyBehindAppBar: true,
      backgroundColor: const Color.fromRGBO(6, 24, 46, 1),
      appBar: appBar,
      body: containerWidget,
    );
  }
}

我不知道该怎么做才能防止这种情况发生,所以我在征求意见。

k5ifujac

k5ifujac1#

这是因为按钮的位置与边距值是固定的。

return Scaffold(
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: Container(
        height: 80,
        width: 350,
        margin: const EdgeInsets.all(10),
        child: ElevatedButtonImpl(onPressed: () => {}, text: "Next")
      ),

所以,你可以给更大的保证金或只有当键盘是了.
如果你想要以前的,只需改变边距值。
给这个零件(margin: const EdgeInsets.all(10))再加一个更大的。
或者如果你想要后者,试试这个。
在下面添加代码

bool keyboardUp = false;

  _detextKeyboardUp() {
    if (MediaQuery.of(context).viewInsets.bottom > 0) {
      keyboardUp = true;
    } else {
      keyboardUp = false;
    }
  }

此外,在构建方法中添加**_detextKeyboardUp()**方法,并将margin:EdgeInsets.all(10)更改为margin:keyboardUp ? EdgeInsets.only(bottom: 60) : EdgeInsets.all(10)

...
@override
  Widget build(BuildContext context) {
    AppBar appBar = AppBar(
      backgroundColor: Colors.transparent,
      elevation: 0,
      leading: IconButton(
        icon: const Icon(Icons.arrow_back, color: Colors.white),
        onPressed: () => Navigator.of(context).pop(),
      ),
    );
    _detextKeyboardUp();
    return Scaffold(
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        floatingActionButton: Container(
            height: 80,
            width: 350,
            margin:
                keyboardUp ? EdgeInsets.only(bottom: 60) : EdgeInsets.all(10),
            // EdgeInsets.all(10),
            child: ElevatedButton(onPressed: () => {}, child: Text("Next"))),

...

你不想这样吗?你想键盘打开时按钮不打开吗?
那么你最好改变小部件的结构。
"下一步"按钮将位于Scaffold的主体中,而不是浮动ActionButton中。

相关问题