更改抽屉中卡片的大小

Question

enter image description here 我需要更改卡的大小，以使它们在垂直方向上更长。

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');},
              )
            ),
),

Answer 1

您可以通过多种方式实现该目标：

• 您可以在文本中添加填充
• 容器具有高度参数

或者您可以使用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,
                              ),
                            ),
                          ),
                        ),
                      ),
                    );
            },
          ),
        ),
      ),
    );
  }

最终结果是您要寻找的：