如何制作像生物编辑器一样的 Tinder - Flutter

Posted 2023-02-23

【中文标题】如何制作像生物编辑器一样的 Tinder - Flutter

【英文标题】：How to make Tinder like Bio editor - Flutter

【发布时间】：2021-06-24 02:42:39

【问题描述】：

我想要一个类似 Tinder 的生物编辑器，当用户点击信息时，文本字段应该出现并从火力库中检索数据，并显示旧的生物，如果用户点击键盘上的完成按钮或按屏幕上的任意位置，应提交数据。提前谢谢你

更新：这是我尝试过的代码，有什么方法可以删除上层堆栈并在点击 about 容器时显示文本字段，并在提交后返回堆栈并显示 about 字段，以及我想在文本字段中从 firebase 检索旧文本（当用户更新时）。

Widget about(BuildContext context, dynamic snapshot) 
return Padding(
  padding: const EdgeInsets.symmetric(horizontal: 8.0),
  child: Container(
        height: MediaQuery
            .of(context)
            .size
            .height * 0.2,
        width: MediaQuery
            .of(context)
            .size
            .width,
        decoration: BoxDecoration(
          color: constantColors.white,
          borderRadius: BorderRadius.circular(15),
        ),
        child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
          Row(
            children: [
              Padding(
                padding: const EdgeInsets.only(
                  top: 8.0,
                  left: 10,
                ),
                child: Text(
                  "About",
                  style: TextStyle(fontSize: 24),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 13, left: 6),
                child: Icon(
                  FontAwesome.pencil,
                  size: 13,
                ),
              )
            ],
          ),
          Stack(
            children: [

              Container(
                height: MediaQuery
                    .of(context)
                    .size
                    .height * 0.1,
                width: MediaQuery
                    .of(context)
                    .size
                    .width,
                child: TextField(
                  onTap: ()
                    Provider.of<PostFunctions>(context, listen: false).about(context, Provider.of<Authentication>(context, listen: false).getUserUid, 
                      'about': aboutController.text,
                    );
                  ,
                  controller: aboutController,
                  maxLines: 8,
                  cursorColor: constantColors.green,
                  decoration: InputDecoration(
                      contentPadding: EdgeInsets.all(15),
                      hintText: 'A little about you',
                      isDense: true,
                      enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(20),
                          borderSide: BorderSide.none),
                      focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(20),
                          borderSide: BorderSide.none),
                      fillColor: constantColors.white,
                      filled: true,),
                ),
              ),
              Container(
                height: MediaQuery
                    .of(context)
                    .size
                    .height * 0.1,
                width: MediaQuery
                    .of(context)
                    .size
                    .width,
                color: constantColors.white,
                child: Text(snapshot.data.data()['about']),),
            ],
          ),
        ]),
      ),



);

这是未来的上传和更新方法

Future about(BuildContext context, String userID, dynamic data)async
return FirebaseFirestore.instance.collection('users').doc(userID).update(data);

【问题讨论】：

附上一个minimal reproducible example，说明您到目前为止所尝试的内容以及您遇到的问题：阅读How to Ask。

您在进行该过程时是否有错误？如果是这样，您能否提供有关问题/错误的信息以及您到目前为止所做的事情？

@padaleiana 对不起，我不活跃，我更新了我尝试的代码。

@Eduardo 是的，当我点击容器时，文本字段没有打开，我是新手，如果你能更简短地解释一下，我将不胜感激

【参考方案1】：

更好的方法是提前检索用户数据。然后，如果数据存在，您可以使用其conntroller 使用数据填充文本字段。