颤振 || flutter 中的卡片边框树

Question

在我的 flutter 项目中，我不知道如何正确制作边框的子树。我想制作一个 Card 边框，其中包含子 Column 内的 Padding 和 Expanded 小部件。非常感谢任何帮助。

这是我的代码：

 Container(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            const SizedBox(height: 30),
                          Card(
                            shape: RoundedRectangleBorder(
                              side: BorderSide(
                                color: Colors.green.shade300,
                              ),
                              borderRadius: BorderRadius.circular(15.0),
                            ),),//Card
                            Padding(
                              padding: const EdgeInsets.all(10),
                              child: Row(
                                children: <Widget>[
                                  Column(
                                    crossAxisAlignment: CrossAxisAlignment.end,
                                    children: [              
                                        child: Text("Voir tous",
                                          style: TextStyle(
                                            color: Color(0xff135888),
                                            fontWeight: FontWeight.bold,
                                            fontSize: MediaQuery.of(context).size.width * 0.03,
                                          ),),
                                      SizedBox(
                                          width : MediaQuery.of(context).size.width * 3,
                                          child: Divider(
                                          color: Color(0xffD1D1D1),
                                          height: 10,
                                          thickness: 1,
                                          indent: 2,
                                          endIndent: 2,
                                        ),
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                            ),//Padding
                              Expanded(
                              child: GridView.count(
                                physics: NeverScrollableScrollPhysics(),
                                crossAxisCount: 3,
                                mainAxisSpacing: 15,
                                shrinkWrap: false,
                                padding: const EdgeInsets.all(10),
                                children: [
                                  makeDashboardItem(
                                      "smart devices", "images/smarts.png", 0),
                                  makeDashboardItem(
                                      "Surveillance", "images/cameras.png", 1),
                                ],
                              ),
                            ),//Expanded
//I want to end the Card here
                          ],
                        ),
                      ),

Answer 1

只需将卡片设置为列的父级：

Container(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            const SizedBox(height: 30),
            Card(
              shape: RoundedRectangleBorder(
                side: BorderSide(
                  color: Colors.green.shade300,
                ),
                borderRadius: BorderRadius.circular(15.0),
              ),
              child: Column(children: [
                Padding(
                  padding: const EdgeInsets.all(10),
                  child: Row(
                    children: <Widget>[
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.end,
                        children: [
                          Text(
                            "Voir tous",
                            style: TextStyle(
                              color: Color(0xff135888),
                              fontWeight: FontWeight.bold,
                              fontSize:
                                  MediaQuery.of(context).size.width * 0.03,
                            ),
                          ),
                          SizedBox(
                            width: MediaQuery.of(context).size.width * 3,
                            child: Divider(
                              color: Color(0xffD1D1D1),
                              height: 10,
                              thickness: 1,
                              indent: 2,
                              endIndent: 2,
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ), //Padding
                Expanded(
                  child: GridView.count(
                    physics: NeverScrollableScrollPhysics(),
                    crossAxisCount: 3,
                    mainAxisSpacing: 15,
                    shrinkWrap: false,
                    padding: const EdgeInsets.all(10),
                    children: [
                      makeDashboardItem(
                          "smart devices", "images/smarts.png", 0),
                      makeDashboardItem(
                          "Surveillance", "images/cameras.png", 1),
                    ],
                  ),
                ), //Expanded
              ]), //I want to end the Card here
            )
          ],
        ),
      ),

颤振 || flutter 中的卡片边框树

Flutter || Card border tree in flutter

android

border

dart

flutter