英文:
How to display a TextField after pressing a button?
问题
我想在我的应用程序的帖子功能中添加一个举报用例。用户可以在看到评论有问题时进行举报。他点击下面显示的三个点：
然后他应该有一个文本字段，以便他可以输入举报评论。只有当用户点击举报按钮时，这个文本字段才可见，当用户完成写举报评论并点击确定按钮时，它应该消失。我找到的一种解决方案是将文本字段设计成一个浮动的元素，类似于 Snackbar，它出现，让用户输入评论，然后消失。但问题是我不知道如何实现它。
英文:
I want to add a report usecase to a post feature on my app. The user can report a comment if he sees something wrong with it. He presses on the three dots shown below:
And then he should have a TextField so that he can input his report comment. This TextField should only be visible if the user clicks on the report button and should dispear when the user finishes writing his report comment and presses on the Okay button. A solution that I find is to make that TextField a floating one, like a snackbar, it appears, gives to the user the hand to write a comment, and dispears. But the issue is I don't know how to implement it.
答案1
得分: 1
你可以使用这段代码并根据你的自定义来实现你的目标，
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Bottom Sheet Demo',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
void _showBottomSheet() {
showModalBottomSheet(
context: context,
builder: (context) {
return Container(
height: 200,
child: Column(
children: [
Padding(
padding: EdgeInsets.all(8),
child: TextField(),
),
ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Okay'),
)
],
),
);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
onPressed: _showBottomSheet,
child: Text('Show Bottom Sheet'),
),
),
);
}
}
英文:
You can achieve your goal using this code with your customization,
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Bottom Sheet Demo',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
void _showBottomSheet() {
showModalBottomSheet(
context: context,
builder: (context) {
return Container(
height: 200,
child: Column(
children: [
Padding(
padding: EdgeInsets.all(8),
child: TextField(),
),
ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Okay'),
)
],
),
);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
onPressed: _showBottomSheet,
child: Text('Show Bottom Sheet'),
),
),
);
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论