Flutter 如何用背景图片创建卡片？

Question

我正在尝试创建一张以图像为背景的卡片。问题是，图像溢出卡片，所以不显示角落。

我需要将图像设置为卡片的背景或将卡片溢出行为设置为不溢出。但我找不到任何属性。

这是我的名片：

Widget _buildProgrammCard() {
  return Container(
    height: 250,
    child: Card(
      child: Image.asset(
        'assets/push.jpg',
        fit: BoxFit.cover,
      ),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
      ),
      elevation: 5,
      margin: EdgeInsets.all(10),
    ),
  );

它看起来像这样：

Answer 1

不使用 - ClipRRect 小部件的其他方式 - 是设置 semanticContainer: true, 的 Card 小部件。

示例代码如下：

Card(
          semanticContainer: true,
          clipBehavior: Clip.antiAliasWithSaveLayer,
          child: Image.network(
            'https://placeimg.com/640/480/any',
            fit: BoxFit.fill,
          ),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0),
          ),
          elevation: 5,
          margin: EdgeInsets.all(10),
        ),

输出：

Answer 2

你可以用ClipRRect包裹你的图片

ClipRRect(
  borderRadius: BorderRadius.vertical(top: Radius.circular(10.0)),
  child: Image.network(...),
)

Answer 3

我还想为我的卡片添加背景图片，但我找到了一种方法。它是通过将 Card 包装到 Container 中，然后使用 BoxDecoration 在 image 属性中添加 DecorationImage ，然后添加 Image。卡中也需要进行更改，否则您只会看到卡后面插入的图像，您必须使其透明。有不同的方法来实现它。

Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(15),
                image: DecorationImage(
                  image: NetworkImage("https://images.unsplash.com/photo-1579202673506-ca3ce28943ef"),
                  fit:BoxFit.cover
                ),
              ),child: Card(
                  color: Colors.transparent,
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
                  shadowColor: Colors.grey,
                  child: Text('Heyyyy')))

您可以随时将卡片包装在不透明度小部件中并根据您的需要更改其透明度，并且还可以提供具有相似图像的颜色可能看起来很美观。 Here is how it looks!

Answer 4

对于那些想要在图像上方显示卡片角的人现在使用

borderOnForeground: true

Answer 5

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Ejemplo"),
        ),
        body: Center(child: SwipeList()));
  }
}

class SwipeList extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return ListItemWidget();
  }
}

class ListItemWidget extends State<SwipeList> {
  List items = getDummyList();

  @override
  Widget build(BuildContext context) {
    return Container(
        child: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return Dismissible(
              key: Key(items[index]),
              background: Container(
                alignment: AlignmentDirectional.centerEnd,
                color: Colors.red,
                child: Icon(
                  Icons.delete,
                  color: Colors.white,
                ),
              ),
              onDismissed: (direction) {
                setState(() {
                  items.removeAt(index);
                });
              },
              direction: DismissDirection.endToStart,
              child: Card(
                  margin: EdgeInsets.only(left: 10, right: 10, top: 12),
                  elevation: 8,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12.0),
                  ),
                  semanticContainer: true,
                  clipBehavior: Clip.antiAliasWithSaveLayer,
                  child: Container(
                    height: 135,
                    child: Stack(children: <Widget>[
                      Positioned(
                          top: 0,
                          left: 0,
                          right: 0,
                          child: Container(
                              color: Colors.white,
                              child: Column(
                                children: <Widget>[
                                  Image.network(
                                    'https://placeimg.com/640/480/any',
                                    fit: BoxFit.fitHeight,
                                  ),
                                ],
                              ))),
                      Positioned(
                          top: 20,
                          left: 0,
                          right: 0,
                          child: Container(
                            child: Column(
                              children: <Widget>[
                                Text(items[index],
                                    style: TextStyle(
                                        fontWeight: FontWeight.bold,
                                        fontSize: 25,
                                        color: Colors.white),
                                    textAlign: TextAlign.center),
                              ],
                            ),
                          )),
                    ]),
                  )),
            );
          },
        ));
  }

  static List getDummyList() {
    List list = List.generate(5, (i) {
      return "Item ${i + 1}";
    });
    print(list);
    return list;
  }
}