如何隐藏键盘下的FloatingActionButton而不是 Flutter 中的textformfield?

huus2vyu  于 2023-03-24  发布在  Flutter
关注(0)|答案(2)|浏览(106)

因此,我试图隐藏使用resizeToAvoidBottomInsert: false,的FloatingActionButton,但它也隐藏textformfield.有没有办法只是隐藏单独的FloatingActionButton,而不是textformfield和textformfield应该出现时,键盘出现.如果你有时间,请分享一些kt如何聚焦textformfield,因为每次它只聚焦第一个文本字段.下面我附上截图和完整的代码.

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'),),
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}
9lowa7mx

9lowa7mx1#

请检查.删除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'),
                  ),
                ),
              ),
            ],
          )
        ],
      ),
    );
  }
}
xvw2m8pv

xvw2m8pv2#

要在打开键盘时隐藏FloatingActionButton,我使用以下命令:

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

正如this answer中所写的,MediaQuery.of(context).viewInsets.bottom检测键盘何时打开。
使用MediaQuery,当该值更改时,屏幕将自动重建,因此当键盘关闭时,呈现floatingActionButton,而当用户打开键盘时,floatingActionButton将为null。

相关问题