列出带有图标的卡片答案

【问题标题】：List cards with icon in flutter列出带有图标的卡片
【发布时间】：2021-06-02 20:04:20
【问题描述】：

我正在尝试制作一张卡片列表，其中包含一张图片作为背景，底部的 3 个图标带有各自的文字。第一张图是这段代码的作用，第二张图是最佳结果，但我不知道该怎么做。

 Expanded(
                    child: GridView.count(
                        crossAxisCount: 1,
                        children: <Widget> [
                          Card(
                            semanticContainer: true,
                            clipBehavior: Clip.antiAliasWithSaveLayer,
                            child: InkWell(
                              onTap: () {
                                BlocProvider.of<NavigationBloc> (context).add(NavigationEvents.SystemsPageClickedEvents);
                              },
                              child: Column(
                                children: <Widget> [
                                  Image.asset('assets/images/test.png'),
                                ],
                              ),
                            ),
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(10.0),
                            ),
                            margin: EdgeInsets.all(20.0),
                          ),
                          Card(
                            semanticContainer: true,
                            clipBehavior: Clip.antiAliasWithSaveLayer,
                            child: InkWell(
                              onTap: () {
                                BlocProvider.of<NavigationBloc> (context).add(NavigationEvents.SystemsPageClickedEvents);
                              },
                              child: Column(
                                children: <Widget> [
                                  Image.asset('assets/images/test.png'),
                                ],
                              ),
                            ),
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(10.0),
                            ),
                            margin: EdgeInsets.all(20.0),
                          ),
                          
                        ]
                    ),
                  ),

如果我使用此代码，我会收到错误：ParentDataWidget 使用不正确。 通常，这意味着 Placed 小部件的 RenderObjectWidget 祖先错误。通常，放置的小部件直接放置在 Stack 小部件中。 Offensive Positioned 当前放置在 ConstrainedBox 小部件内。最终结果是关于我想要的，因为如您所见，它在一张卡和另一张卡之间创建了太多空间。问题是 Container 但我不知道如何在不使用 height: 180, 的情况下获得相同的结果。如何解决这两个问题？

Expanded(
                child: GridView.count(
                    crossAxisCount: 1,
                    children: <Widget> [
                      Stack(
                          children: [
                          Container(
                            height: 180,
                            child: Positioned.fill(
                               child: InkWell(
                                  onTap: () {
                                    BlocProvider.of<NavigationBloc> (context).add(NavigationEvents.SystemsPageClickedEvents);
                                  },
                                  child: Image.asset('assets/images/test.png', fit: BoxFit.fill,),
                                ),
                            ),
                          ),
                            Positioned(
                              bottom: 140,
                              left: 0,
                              right: 0,
                              child: Container(
                                height: 60,
                                color: Colors.green,
                                child: Padding(
                                  padding: const EdgeInsets.symmetric(horizontal: 15.0),
                                  child: Row(
                                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                    children: [
                                      const Icon(Icons.house),
                                      const Icon(Icons.house),
                                      const Icon(Icons.house),
                                    ],
                                  ),
                                ),
                              ),
                            )
                          ],
                        ),



                    ]
                ),
              ),

【问题讨论】：

对于这种布局，可以使用 Stack

标签： flutter dart flutter-layout

【解决方案1】：

您可以使用Stack() 小部件并将子小部件放置在底部使用Positioned() 小部件内部。

这里给出了一个基本结构。

Stack(
      children: [
        // Image ( any image widget can be used. network, asset ect)
        Image.network(url),
        // Icons
        Positioned(
          bottom: 0,
          child: Container(
            width: MediaQuery.of(context).size.width,
            color: Colors.black54,
            child: Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                // Icon One
                IconButton(icon: Icon(Icons.home), onPressed: () => {}),
                // Icon Two
                IconButton(icon: Icon(Icons.home), onPressed: () => {}),
                // Icon Three
                IconButton(icon: Icon(Icons.home), onPressed: () => {}),
              ],
            ),
          ),
        )
      ],
    )

【讨论】：

【解决方案2】：

嘿，你可以用 Stack 来代替 Card。

Card(
    child: Stack(
      children: [
        Positioned.fill(
          child: InkWell(
            onTap: () {
              BlocProvider.of<NavigationBloc> (context).add(NavigationEvents.SystemsPageClickedEvents);
            },
            child: Image.asset(
              'assets/images/test.png',
              fit: BoxFit.cover,
            ),
          ),
        ),
        Positioned(
          bottom: 0,
          left: 0,
          right: 0,
          child: Container(
            height: 60,
            color: Colors.green,
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 15.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  const Icon(Icons.house),
                  const Icon(Icons.house),
                  const Icon(Icons.house),
                ],
              ),
            ),
          ),
        )
      ],
    ),
  )

【讨论】：

【解决方案3】：

解决了问题。

Container(
            margin: EdgeInsets.only(top: 170),
            child: SingleChildScrollView(
              child: Padding(
                padding: EdgeInsets.all(17.0),
                child: Column(
                  children: [
                    InkWell(
                      onTap: () {
                       // BlocProvider.of<NavigationBloc> (context).add(NavigationEvents.HomePageClickedEvents);
                      },
                      child: Container(
                        margin: EdgeInsets.only(bottom: 8),
                        height: 180,
                        child: Card(
                          color: blue,
                          semanticContainer: true,
                          clipBehavior: Clip.antiAliasWithSaveLayer,
                          child: Image.asset('assets/images/test.png', fit: BoxFit.fill,),
                          //shadowColor: Colors.white,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10.0),
                          ),
                          elevation: 0,
                          margin: EdgeInsets.all(10.0),
                        ),
                      ),
                    )])))),

【讨论】：