在我的详细页面上的扑动，我试图用ClipRREct圆形图像，它工作得很好一个列表视图页面，但在本页不起作用

Question

这可能是因为灵活的大小盒子?因为在列表视图页面上，clipret工作得很好。或者我应该实现另一种类型的照片舍入?

final topContentText = Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const SizedBox(height: 30.0),
Flexible(
flex: 1,
fit: FlexFit.tight,
child: SizedBox(
width: double.infinity,
height: double.infinity,
child: ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Image.network(
plant.pImage,
),
),
),
),
const SizedBox(height: 20.0),
Text(
plant.pName,
style: const TextStyle(color: Color.fromRGBO(254, 255, 238, 1.0), fontSize: 45.0),
),
const SizedBox(height: 10.0),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 4,
child: Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Text(
plant.pLatinName,
style: const TextStyle(color: Color.fromRGBO(254, 255, 238, 1.0)),
))),
Expanded(flex: 2, child: plantType)
],
),
],
mainAxisSize: MainAxisSize.min,
);[![enter image description here][1]][1]

Answer 1

我现在已经得到了它，但是如果有人遇到一个相当奇怪的问题，我仍然会粘贴代码。我使用container，然后是BoxDecoration。

final topContentText = Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const SizedBox(height: 30.0),
Flexible(
flex: 1,
fit: FlexFit.tight,
child: SizedBox(
width: double.infinity,
height: double.infinity,
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover, image: NetworkImage(plant.pImage)),
borderRadius: const BorderRadius.all(Radius.circular(8.0)),
),
),
),
),
const SizedBox(height: 20.0),
Text(
plant.pName,
style: const TextStyle(color: Color.fromRGBO(254, 255, 238, 1.0), fontSize: 45.0),
),
const SizedBox(height: 10.0),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 4,
child: Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Text(
plant.pLatinName,
style: const TextStyle(color: Color.fromRGBO(254, 255, 238, 1.0)),
))),
Expanded(flex: 2, child: plantType)
],
),
],
mainAxisSize: MainAxisSize.min,
);

Answer 2

您可以尝试像这样使用ClipOval和CicleAvatar:

final topContentText = Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const SizedBox(height: 30.0),
Flexible(
flex: 1,
fit: FlexFit.tight,
child: SizedBox(
width: double.infinity,
height: double.infinity,
child: ClipOval(
child: CircleAvatar(
backgroundColor: Colors.transparent,
maxRadius: 30,
child: Image.network(
plant.pImage,
),
),
),
),
),
const SizedBox(height: 20.0),
Text(
plant.pName,
style: const TextStyle(color: Color.fromRGBO(254, 255, 238, 1.0), fontSize: 45.0),
),
const SizedBox(height: 10.0),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 4,
child: Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Text(
plant.pLatinName,
style: const TextStyle(color: Color.fromRGBO(254, 255, 238, 1.0)),
))),
Expanded(flex: 2, child: plantType)
],
),
],
mainAxisSize: MainAxisSize.min,
);[![enter image description here][1]][1]