flutter - 更改抽屉中卡片的大小
问题描述
child:Drawer(
child: ListView(
children: <Widget>[
DrawerHeader(
child: Text('DRAWER HEADER',
style: TextStyle(color: Colors.white),),
decoration: BoxDecoration(color:Colors.deepPurple.shade300),
),
Card(
color: Colors.deepPurple.shade300,
child: ListTile(
title: Text('Hi',
style: TextStyle(color: Colors.white),),
onTap:(){debugPrint('Add');},
)
),
),
解决方案
您可以通过多种方式实现该目标:
- 您可以在文本中添加填充
- 容器有一个高度参数
或者你可以使用 SizedBox 然后你的 Card 在里面,像这样:
int listLength = 8; // The size of your List, this will vary.
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Drawer + Card"),
),
drawer: Drawer(
child: ListView.builder(
itemCount: listLength + 1, // + 1 is to handle your Header
itemBuilder: (context, index) {
return index == 0
? SizedBox(
height: 160,
child: Container(
margin: EdgeInsets.only(bottom: 10),
color: Colors.deepPurple.shade300,
child: Padding(
padding: const EdgeInsets.all(10),
child: Text(
"DRAWER HEADER",
style: TextStyle(color: Colors.white, fontWeight: FontWeight.w600),
),
),
),
)
: SizedBox(
height: 80, // Change this size to make it bigger or smaller
child: Card(
color: Colors.deepPurple.shade300,
child: Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.only(left: 10),
child: Text(
"Index $index",
style: TextStyle(
color: Colors.white,
fontSize: 18,
),
),
),
),
),
);
},
),
),
),
);
}
最终结果是您正在寻找的:
推荐阅读
- javascript - 从链式承诺返回映射数组
- javascript - 未捕获(承诺中)TypeError:无法在评估时设置未定义的属性“playerName”
- html - 仅当后跟文本时如何在元素后添加边距
- javascript - 为什么我在 Google Cloud Functions 上从不变的来源收到间歇性 CORS 错误?
- python-3.x - Python - BS4 - 从一个类中提取多个值
- angular - 如何在 KendoUI Grid 中为 Angular 项目使用 http.get 而不是 http.jsonp
- android - Android 5 上的 AppCompatButton:app:backgroundTint 有效,但 supportBackgroundTintList 无效:(
- php - 将查询从 laravel eloquent 转换为原始 sql
- python - Python Pandas - 即使跨数据帧存在相同的列,pd.merge 上的 KeyError
- angular - Bearer Token 在 Postman 上工作,但不在 localhost