Проблема в использовании ClipRRect () во Flutter - PullRequest
Новая
       13

Проблема в использовании ClipRRect () во Flutter

0 голосов
/ 20 декабря 2018

Я использовал ClipRRect для закругленных углов в пользовательском интерфейсе.ClipRRect обертывает topContent и bottomContent - это стек и столбец соответственно.Но нижние углы не круглые.В чем может быть причина этого?

this is the screenshot

Класс cardModel используется для хранения пути изображения в этом случае. 

    class FeaturedCard extends StatelessWidget {
     final FeaturedCardModel cardModel;
     final double parallaxPercent;

  FeaturedCard({
    this.cardModel,
    this.parallaxPercent = 0.0, //default value
  });

  @override
  Widget build(BuildContext context) {
    final topContent = Stack(
      children: <Widget>[
        Container(
            padding: EdgeInsets.only(
              left: 10.0,
            ),
            height: MediaQuery.of(context).size.height * 0.3,
            decoration: new BoxDecoration(
              image: new DecorationImage(
                image: new AssetImage(cardModel.imgUrl),
                fit: BoxFit.fill,
              ),
            )),
      ],
    );

    final bottomContentText = Text(
      'This is the sample text',
      style: TextStyle(fontSize: 18.0),
    );

    final bottomContent = Container(
      height: MediaQuery.of(context).size.height * 0.5,
      width: MediaQuery.of(context).size.width,
      color: Colors.white,
      padding: EdgeInsets.all(40.0),
      child: Center(
        child:
            bottomContentText,
        ),
      );

    return ClipRRect(
      borderRadius: BorderRadius.circular(16.0),
      child: Column(
        children: <Widget>[
          topContent,
          bottomContent,
        ],
      ),
    );
   }
  }

1 Ответ

0 голосов
/ 21 декабря 2018

Если вы перейдете к Flutter Inspector и выполните "Toggle Debug Paint", вы увидите, что отсечение происходит в синей области ниже.

Вы можете исправить это, указав размер для своей машинки для стрижки. 

return SizedBox(
  height: MediaQuery.of(context).size.height * 0.8,
  child: ClipRRect(
    borderRadius: BorderRadius.circular(16.0),
    child: Column(
      children: <Widget>[
        topContent,
        //bottomContent,
      ],
    ),
  ),
);
...