如何在键盘下隐藏 FloatingActionButton 而不是 flutter 中的 textformfield？

Question

所以我试图使用

resizeToAvoidBottomInsert: false,

隐藏FloatingActionButton，但它也隐藏了textformfield。有什么方法可以单独隐藏 FloatingActionButton 而不是 textformfield 和 textformfield 应该在键盘出现时出现。如果您有时间，请分享一些 kt 如何聚焦 textformfield，因为每次它只聚焦第一个 textfield。下面我附上截图和完整代码。

    import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CardWithTextformfield(),
    );
  }
}

class CardWithTextformfield extends StatefulWidget {
  const CardWithTextformfield({Key? key}) : super(key: key);

  @override
  _CardWithTextformfieldState createState() => _CardWithTextformfieldState();
}

class _CardWithTextformfieldState extends State<CardWithTextformfield>  {


  var name =<TextEditingController>[];
  var id =<TextEditingController>[];
  


  var addCard =1;  
  bool cardOneVisibility=true;
  bool cardTwoVisibility=false;
  bool cardThreeVisibility=false;
  bool cardFourVisibility=false;
  bool cardFiveVisibility=false;
  bool cardSixVisibility=false;


  void incrementcard(){
    setState(() {
      
      if(addCard==0){   
        cardOneVisibility=true;
      }
      else if(addCard==1){ 
        cardOneVisibility=true;
        cardTwoVisibility=true;
      }
      else if(addCard==2){ 
        cardOneVisibility=true;
        cardTwoVisibility=true;
        cardThreeVisibility=true;
      }
      else if(addCard==3){  
        cardOneVisibility=true;
        cardTwoVisibility=true;
        cardThreeVisibility=true;
        cardFourVisibility=true;
      }
      else if(addCard==4){  
        cardOneVisibility=true;
        cardTwoVisibility=true;
        cardThreeVisibility=true;
        cardFourVisibility=true;
        cardFiveVisibility=true;
      }
      else if(addCard==5){  
        cardOneVisibility=true;
        cardTwoVisibility=true;
        cardThreeVisibility=true;
        cardFourVisibility=true;
        cardFiveVisibility=true;
        cardSixVisibility=true;
      }
      addCard++;

    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        title: Text('Card with TextformField'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: addCard>=6 ? null : incrementcard, 
        child: Icon(Icons.add),
      ),
      body: Container(

        child:SingleChildScrollView(
          child: Column(
            children: [
              Visibility(visible: cardOneVisibility,child: cardslist(0)),
              Visibility(visible: cardTwoVisibility,child: cardslist(1)),
              Visibility(visible: cardThreeVisibility,child: cardslist(2)),
              Visibility(visible: cardFourVisibility,child: cardslist(3)),
              Visibility(visible: cardFiveVisibility,child: cardslist(4)),
              Visibility(visible: cardSixVisibility,child: cardslist(5)),
            ],
          ),
        ),
      ),
    );
  }
  Widget cardslist(int index){
    if(name.length <= index){
      name.add(TextEditingController());
      id.add(TextEditingController());
    }
    return Card(
      margin: EdgeInsets.all(10),
      child: Container(
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                    margin: EdgeInsets.all(10),
                    child: Text('Team Name: ')),
                Expanded(child: TextFormField(
                  controller: name[index],
                    decoration: InputDecoration(hintText: 'Team Name'),
                ),),
                Container(
                  margin: EdgeInsets.all(10),
                  child: Text('Team Id: '),),
                Expanded(child: TextFormField(
                  controller: id[index],
                    decoration: InputDecoration(hintText: 'Team Id'),
                ),),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                GestureDetector(
                  child: Container(
                    width: 50,height: 50,
                    margin: EdgeInsets.all(10),
                    decoration: BoxDecoration(
                      shape: BoxShape.rectangle,
                      color:Colors.grey,
                    ),
                    child: Center(child: Text('IT'),),
                  ),
                 
                ),
                GestureDetector(
                  child: Container(
                    width: 50,height: 50,
                    margin: EdgeInsets.all(10),
                    decoration: BoxDecoration(
                      shape: BoxShape.rectangle,
                      color: Colors.grey,
                    ),
                    child: Center(child: Text('DEV'),),
                  ),
                ),
                GestureDetector(
                  child: Container(
                    width: 50,height: 50,
                    margin: EdgeInsets.all(10),
                    decoration: BoxDecoration(
                      shape: BoxShape.rectangle,
                      color: Colors.grey,
                    ),
                    child: Center(child: Text('TEST'),),
                  ),
                ),
                GestureDetector(
                  child: Container(
                    width: 50,height: 50,
                    margin: EdgeInsets.all(10),
                    decoration: BoxDecoration(
                      shape: BoxShape.rectangle,
                      color: Colors.grey,
                    ),
                    child: Center(child: Text('HR'),),
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

请检查。删除

resizeToAvoidBottomInsert: false,

并根据addCard大小控制浮动按钮。

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CardWithTextformfield(),
    );
  }
}

class CardWithTextformfield extends StatefulWidget {
  const CardWithTextformfield({Key key}) : super(key: key);

  @override
  _CardWithTextformfieldState createState() => _CardWithTextformfieldState();
}

class _CardWithTextformfieldState extends State<CardWithTextformfield> {
  List<TextEditingController> name = <TextEditingController>[];
  List<TextEditingController> id = <TextEditingController>[];

  var addCard = 1;
  bool cardOneVisibility = true;
  bool cardTwoVisibility = false;
  bool cardThreeVisibility = false;
  bool cardFourVisibility = false;
  bool cardFiveVisibility = false;
  bool cardSixVisibility = false;

  bool showFab = false;

  void incrementcard() {
    setState(() {
      if (addCard == 0) {
        cardOneVisibility = true;
      } else if (addCard == 1) {
        cardOneVisibility = true;
        cardTwoVisibility = true;
      } else if (addCard == 2) {
        cardOneVisibility = true;
        cardTwoVisibility = true;
        cardThreeVisibility = true;
      } else if (addCard == 3) {
        cardOneVisibility = true;
        cardTwoVisibility = true;
        cardThreeVisibility = true;
        cardFourVisibility = true;
      } else if (addCard == 4) {
        cardOneVisibility = true;
        cardTwoVisibility = true;
        cardThreeVisibility = true;
        cardFourVisibility = true;
        cardFiveVisibility = true;
      } else if (addCard == 5) {
        cardOneVisibility = true;
        cardTwoVisibility = true;
        cardThreeVisibility = true;
        cardFourVisibility = true;
        cardFiveVisibility = true;
        cardSixVisibility = true;
      }
      addCard++;
    });
  }

  @override
  Widget build(BuildContext context) {
    final bool keyboardIsOpen = MediaQuery.of(context).viewInsets.bottom != 0;
    return Scaffold(
      resizeToAvoidBottomInset: true,
      appBar: AppBar(
        title: const Text('Card with TextformField'),
      ),
      floatingActionButton: Visibility(
        visible: !keyboardIsOpen,
        child: FloatingActionButton(
          onPressed: addCard >= 6 ? null : incrementcard,
          child: const Icon(Icons.add),
        ),
      ),
      body: ListView(
        shrinkWrap: true,
        physics: const ScrollPhysics(),
        children: [
          Visibility(visible: cardOneVisibility, child: cardslist(0)),
          Visibility(visible: cardTwoVisibility, child: cardslist(1)),
          Visibility(visible: cardThreeVisibility, child: cardslist(2)),
          Visibility(visible: cardFourVisibility, child: cardslist(3)),
          Visibility(visible: cardFiveVisibility, child: cardslist(4)),
          Visibility(visible: cardSixVisibility, child: cardslist(5)),
        ],
      ),
    );
  }

  Widget cardslist(int index) {
    if (name.length <= index) {
      name.add(TextEditingController(text: ""));
      id.add(TextEditingController(text: ""));
    }
    return Card(
      margin: EdgeInsets.all(10),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Container(
                  margin: EdgeInsets.all(10), child: Text('Team Name: ')),
              Expanded(
                child: TextFormField(
                  controller: name[index],
                  decoration: InputDecoration(hintText: 'Team Name'),
                ),
              ),
              Container(
                margin: EdgeInsets.all(10),
                child: Text('Team Id: '),
              ),
              Expanded(
                child: TextFormField(
                  controller: id[index],
                  decoration: InputDecoration(hintText: 'Team Id'),
                ),
              ),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              GestureDetector(
                child: Container(
                  width: 50,
                  height: 50,
                  margin: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                    shape: BoxShape.rectangle,
                    color: Colors.grey,
                  ),
                  child: Center(
                    child: Text('IT'),
                  ),
                ),
              ),
              GestureDetector(
                child: Container(
                  width: 50,
                  height: 50,
                  margin: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                    shape: BoxShape.rectangle,
                    color: Colors.grey,
                  ),
                  child: Center(
                    child: Text('DEV'),
                  ),
                ),
              ),
              GestureDetector(
                child: Container(
                  width: 50,
                  height: 50,
                  margin: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                    shape: BoxShape.rectangle,
                    color: Colors.grey,
                  ),
                  child: Center(
                    child: Text('TEST'),
                  ),
                ),
              ),
              GestureDetector(
                child: Container(
                  width: 50,
                  height: 50,
                  margin: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                    shape: BoxShape.rectangle,
                    color: Colors.grey,
                  ),
                  child: Center(
                    child: Text('HR'),
                  ),
                ),
              ),
            ],
          )
        ],
      ),
    );
  }
}

Answer 2

要在打开键盘时隐藏 FloatingActionButton，我使用这个：

floatingActionButton: MediaQuery.of(context).viewInsets.bottom != 0 ? null : FloatingActionButton(
  // FloatingActionButton code
)

如this 答案中所写，MediaQuery.of(context).viewInsets.bottom 检测键盘何时打开。

使用 MediaQuery，当该值更改时屏幕将自动重建，因此当键盘关闭时，将呈现 floatingActionButton，相反，当用户打开键盘时，floatingActionButton 将为 null。