flutter - 单击文本按钮颤动时如何显示包含卡片的ListView
问题描述
我大致知道如何直接实现Card ListView,没有这样的问题。但是,我不知道如何通过单击TextButton打开ListView。下面是一些例子:
这是我的屏幕 在此处输入图像描述
这是我的代码
class _CardScreenState extends State<CardScreen> {
var index = 0;
bool buttonClicked = false;
List<String> cards = [
"On hold",
"In progress",
"Needs review",
];
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.endTop,
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.tealAccent,
onPressed: () {
Get.back();
},
child: Icon(Icons.arrow_back),
),
body: Container(
color: Colors.black,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
alignment: Alignment.topCenter,
child: SizedBox(
height: 150,
width: 500,
child: DecoratedBox(
decoration: BoxDecoration(color: Colors.grey[900]),
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Spacer(),
TextButton(
onPressed: () {
setState(() {
buttonClicked = !buttonClicked;
getCard();
});
},
child: Text(
"On hold",
style: TextStyle(color: Colors.grey[300]),
)),
Spacer(),
TextButton(
onPressed: () {},
child: Text(
"In progress",
style: TextStyle(color: Colors.grey[300]),
)),
Spacer(),
TextButton(
onPressed: () {},
child: Text(
"Needs review",
style: TextStyle(color: Colors.grey[300]),
)),
Spacer(),
TextButton(
onPressed: () {},
child: Text(
"Approved",
style: TextStyle(color: Colors.grey[300]),
)),
Spacer(),
],
),
),
),
),
);
getCard() {
return Expanded(
child: ListView.builder(
itemBuilder: (_, index) => Card(
color: Colors.grey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
//Padding(padding: EdgeInsets.only(left: 5, right: 5)),
Text("data")
],
),
),
),
);
}
}
Т他的预期结果是这样的
解决方案
演示小部件,
class TabBarDemo extends StatelessWidget {
const TabBarDemo({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 4,
child: Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
backgroundColor: Colors.black,
actions: [
GestureDetector(
onTap: () {},
child: Container(
padding: EdgeInsets.all(8),
decoration:
BoxDecoration(color: Colors.blue, shape: BoxShape.circle),
child: Icon(
Icons.add,
color: Colors.white,
)),
)
],
bottom: TabBar(
tabs: [
Tab(
icon: Text(
"On hold",
style: TextStyle(color: Colors.grey[300]),
)),
Tab(
icon: Text(
"In progress",
style: TextStyle(color: Colors.grey[300]),
)),
Tab(
icon: Text(
"Needs review",
style: TextStyle(color: Colors.grey[300]),
)),
Tab(
icon: Text(
"Approved",
style: TextStyle(color: Colors.grey[300]),
)),
],
),
title: const Text('Tabs Demo'),
),
body: TabBarView(
children: [
const Center(
child: Text(
"On hold",
),
),
const InProgressBody(), // your listView here
Text(
"Needs review",
style: TextStyle(color: Colors.grey[300]),
),
Text(
"Approved",
style: TextStyle(color: Colors.grey[300]),
)
],
),
),
);
}
}
class InProgressBody extends StatelessWidget {
const InProgressBody({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return ListView.builder(
itemBuilder: (context, index) => Container(
height: 100,
child: Text(
"$index",
style: TextStyle(color: Colors.white, fontSize: 33),
),
),
);
}
}
推荐阅读
- firebase - Firebase 和 AngularDart。错误:准备要上传的托管文件时出现问题
- php - 通过使用 PHP 选择复选框来选择和删除多行
- javascript - 使用 Ajax 查看的 jQuery POST 表单
- c - C for 循环与推出循环的效果不同
- django - 检查一系列值
- active-directory - 用户无法创建 Azure AD 应用程序
- node.js - mail-listener2:无法从对象中获取字符串“地址”
- android - 使用 Google Places API?
- php - 优化高级 SQL 查询
- laravel - 如何计算 laravel 表格中的小计和总计?