在FAB上添加表格小工具点击FLUTTER

Question

我需要应用程序中的用户点击添加按钮，它应该在屏幕上创建一个基本的表。我在Scaffold中有表的代码，还有一个FAB，它还没有做任何事情。我应该在Pressed上写些什么才能在屏幕上添加我的表格？

如果你需要，这是我的代码：

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:const Text("Table"),
),
floatingActionButton: FloatingActionButton(
highlightElevation: 50,
onPressed: () {},
child: const Icon(Icons.add),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
margin: const EdgeInsets.all(20),
child: Table(
border: const TableBorder(top: BorderSide(), bottom: BorderSide(), left: BorderSide(), right: BorderSide(),
horizontalInside: BorderSide(color: Colors.blue, style: BorderStyle.solid),
verticalInside: BorderSide(color: Colors.blue, style: BorderStyle.solid)),
children: const [
TableRow(children: [
Padding(padding: EdgeInsets.all(10.0),),
Padding(padding: EdgeInsets.all(10.0),)
]),
TableRow(children: [
Padding(padding: EdgeInsets.all(10.0),),
Padding(padding: EdgeInsets.all(10.0),)
]),
TableRow(children: [
Padding(padding: EdgeInsets.all(10.0),),
Padding(padding: EdgeInsets.all(10.0),)
]),
TableRow(children: [
Padding(padding: EdgeInsets.all(10.0),),
Padding(padding: EdgeInsets.all(10.0),)
]),
],
),
),
]
),
),
);
} ```

Answer 1

尝试以下代码：

List<Widget> children = [];

---

floatingActionButton: FloatingActionButton(
highlightElevation: 50,
onPressed: () {
children.add(
value // Code for your table
);
setState(() {});
},
child: const Icon(Icons.add),
),

---

Column(
mainAxisAlignment: MainAxisAlignment.center,
children: children,
),

Answer 2

class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<Widget> children = [];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:const Text("Table"),
),
floatingActionButton: FloatingActionButton(
highlightElevation: 50,
onPressed: () {
children.add(
Container(
margin: const EdgeInsets.all(20),
child: Table(
border: const TableBorder(top: BorderSide(), bottom: BorderSide(), left: BorderSide(), right: BorderSide(),
horizontalInside: BorderSide(color: Colors.blue, style: BorderStyle.solid),
verticalInside: BorderSide(color: Colors.blue, style: BorderStyle.solid)),
children: const [
TableRow(children: [
Padding(padding: EdgeInsets.all(10.0),),
Padding(padding: EdgeInsets.all(10.0),)
]),
TableRow(children: [
Padding(padding: EdgeInsets.all(10.0),),
Padding(padding: EdgeInsets.all(10.0),)
]),
TableRow(children: [
Padding(padding: EdgeInsets.all(10.0),),
Padding(padding: EdgeInsets.all(10.0),)
]),
TableRow(children: [
Padding(padding: EdgeInsets.all(10.0),),
Padding(padding: EdgeInsets.all(10.0),)
]),
],
),
),
);
},
child: const Icon(Icons.add),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: children,
),
),
);
}
}