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角以在图像上方绘制的人，请使用

borderOnForeground: true

Answer 4

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;
  }
}

Answer 5

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

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!

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

5 个答案: