时间戳

首页 > 解决方案 > 在我关于颤振的详细信息页面中，我正在尝试使用 ClipRREct 对图像进行舍入，它在列表视图页面中运行良好，但在此页面上它不起作用

flutter - 在我关于颤振的详细信息页面中，我正在尝试使用 ClipRREct 对图像进行舍入，它在列表视图页面中运行良好，但在此页面上它不起作用

问题描述

可能是因为大小盒上的灵活？因为正如我所说，在 listview 页面上 ClipRRect 工作得很好。或者我应该实施不同类型的四舍五入照片？

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]

标签： flutterflutter-layout

解决方案

您可以尝试像这样将 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]

推荐阅读