Question

我正在构建一个应用程序，并且正在使用容器设计卡片，但是这里的东西图像应该是容器的1/3，而不是填充整个容器。这是容器的代码：

Container(
height: 240,
width: 160,
decoration: BoxDecoration(
image: DecorationImage(image: AssetImage('images/rest.jpg'),fit: BoxFit.cover),
borderRadius: BorderRadius.all(Radius.circular(10)),
color: Color(0xFFFDEEDD),
),
child: Column(
children: <Widget>[
Text('Hello'),
Row(
children: <Widget>[
Text('World'),
Text('4.2'),
],
)
],
),
),

Card I am trying to replicate

Answer 1

我认为最好在这里使用ClipRRect。如果使用材料，也可以使用ListTile：

    return Material(
        child: Center(
            child: Container(
                color: Colors.black12,
                width: 250,
                child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children:[
                        ClipRRect(
                            child:Image.network("https://via.placeholder.com/250"),
                            borderRadius: BorderRadius.all(Radius.circular(10)),
                        ),
                        ListTile(
                            title: Text("The fifties"),
                            subtitle: Text("Subtitle"),
                        )
                    ]
                )
            )
        )
    );

Flutter-如何在容器中使用图像？

1 个答案: