flutter - 单击时添加相同的 Widget -Flutter
问题描述
我面临着实现它的困难。当我单击该按钮时,我希望它出现在底部并带有一个删除选项。带有 multi_select_chip 的选项不适用于 SDK 2.12 版,谁能告诉我该怎么做?
添加按钮是个好主意吗?如果创建一个新的小部件,它将与我刚刚单击的按钮中的数据相结合,会是什么样子?
我是 Flutter 的新手,任何帮助都会非常有用。
class Demo extends StatefulWidget {
@override
_DemoState createState() => _DemoState();
}
class _DemoState extends State<Demo> {
List<Widget> widgets = <Widget>[];
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: widgets,
),
);
}
Widget show() {
return Center(
child: Column(
children: widgets,
),
);
}
@override
void initState() {
widgets = <Widget>[
// Text(
// "This is a sample text",
// style: TextStyle(fontSize: 40),
// ),
Container(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Wrap(
spacing: 8.0,
// line interval
runSpacing: 8.0,
children: <Widget>[
ConstrainedBox(
constraints:
const BoxConstraints.tightFor(width: 70, height: 35),
child: ElevatedButton(
child: Text(
'Lion',
style: TextStyle(fontSize: 13),
),
onPressed: () {
debugPrint("clicked");
debugPrint('widgets: $widgets');
widgets.insert(1, SampleContainer());
setState(() {});
},
style: ElevatedButton.styleFrom(
primary: purple, elevation: 10)),
),
const SizedBox(width: 8.0),
ConstrainedBox(
constraints:
const BoxConstraints.tightFor(width: 125, height: 35),
child: ElevatedButton(
child: Text(
'Flamingo',
style: TextStyle(fontSize: 13),
),
onPressed: () {
debugPrint("clicked");
debugPrint('widgets: $widgets');
widgets.insert(1, SampleContainer());
setState(() {});
},
style: ElevatedButton.styleFrom(
primary: purple, elevation: 10)),
),
const SizedBox(width: 8.0),
ConstrainedBox(
constraints:
const BoxConstraints.tightFor(width: 105, height: 35),
child: ElevatedButton(
child: Text(
'Hippo',
style: TextStyle(fontSize: 13),
),
onPressed: () {
debugPrint("clicked");
debugPrint('widgets: $widgets');
widgets.insert(1, SampleContainer());
setState(() {});
},
style: ElevatedButton.styleFrom(
primary: purple, elevation: 10)),
),
// ]),
// const SizedBox(width: 80.0),
// Row(children: <Widget>[
// const SizedBox(width: 40.0),
ConstrainedBox(
constraints:
const BoxConstraints.tightFor(width: 100, height: 35),
child: ElevatedButton(
child:
Text("Horse", style: TextStyle(fontSize: 13)),
onPressed: () {
debugPrint("clicked");
debugPrint('widgets: $widgets');
widgets.insert(1, SampleContainer());
setState(() {});
},
style: ElevatedButton.styleFrom(
primary: purple, elevation: 10)),
),
const SizedBox(width: 8.0),
ConstrainedBox(
constraints:
const BoxConstraints.tightFor(width: 135, height: 35),
child: ElevatedButton(
child: Text("Tiger",
style: TextStyle(fontSize: 13)),
onPressed: () {
debugPrint("clicked");
debugPrint('widgets: $widgets');
widgets.insert(1, SampleContainer());
setState(() {});
},
style: ElevatedButton.styleFrom(
primary: purple, elevation: 10)),
),
const SizedBox(width: 4.0),
ConstrainedBox(
constraints:
const BoxConstraints.tightFor(width: 70, height: 35),
child: ElevatedButton(
child: Text("INNE", style: TextStyle(fontSize: 13)),
onPressed: () {
debugPrint("clicked");
debugPrint('widgets: $widgets');
widgets.insert(1, SampleContainer());
setState(() {});
},
style: ElevatedButton.styleFrom(
primary: purple, elevation: 10)),
),
]),
]),
),
];
}
// Widget show() {
// return SampleContainer();
// }
}
class SampleContainer extends StatefulWidget {
@override
_SampleContainerState createState() => _SampleContainerState();
}.
class _SampleContainerState extends State<SampleContainer> {
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Wrap(
spacing: 8.0,
// line interval
runSpacing: 8.0,
children: <Widget>[
const SizedBox(width: 40.0),
ElevatedButton(
child: Text("INNE"),
onPressed: () {
setState(() {});
},
)
]),
] ),);
}
}
解决方案
这是示例。
import 'package:flutter/material.dart';
class WidgetPicker extends StatefulWidget {
const WidgetPicker({Key key}) : super(key: key);
@override
_WidgetPickerState createState() => _WidgetPickerState();
}
class _WidgetPickerState extends State<WidgetPicker> {
List<String> values = [
'Hello',
'Hello2',
'Hello3',
];
List<String> pickedValues = [];
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_buildValues(),
const SizedBox(
height: 30,
),
_buildPickeds(),
],
),
);
}
Widget _buildValues() {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: values
.map(
(value) => GestureDetector(
onTap: () {
if (pickedValues.contains(value)) {
pickedValues.remove(value);
} else {
pickedValues.add(value);
}
setState(() {});
},
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 10,
vertical: 10,
),
color: Colors.blueGrey,
child: Text(
value,
),
),
),
)
.toList(),
);
}
Widget _buildPickeds() {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: pickedValues
.map(
(value) => GestureDetector(
onTap: () {
if (pickedValues.contains(value)) {
pickedValues.remove(value);
} else {
pickedValues.add(value);
}
setState(() {});
},
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 10,
vertical: 10,
),
color: Colors.red,
child: Text(
value,
),
),
),
)
.toList(),
);
}
}
推荐阅读
- gitlab - GitLab CI 计划管道未在主服务器上运行
- scala - Scala String indexOf Character 从右侧
- ios - AgoraKit Agora.io `UICollectionViewCell` 中的`videoView`,重新加载问题
- python - POSTGRESQL 使用 Python 添加数据而不重复
- javascript - 如何强制 Node.js 在登录时不显示我的登录按钮并在注销时显示它
- javascript - 使用 FormData 多部分发布请求在节点 js 中上传文件
- ruby-on-rails - 有没有办法使用 Rails Active Storage 在 CSS 中设置背景图像?
- gps - rinex GNSS 可观察文件上的每一列是什么意思?
- ios - 检索和显示模型数据时遇到问题
- python - AttributeError:模块“articles.views”没有属性“about”