颤动图像轮播更改边框半径答案

【问题标题】：flutter image carousel change border radius颤动图像轮播更改边框半径
【发布时间】：2020-10-11 02:37:29
【问题描述】：

您好，我正在尝试使用 carousel_slider 包制作图像轮播并将手势检测器附加到每个轮播项目。我想让滑块图像弯曲。我尝试使用边框半径但不工作。我在这里缺少什么

class BuildCarousel extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(borderRadius: BorderRadius.circular(10)),
      child: CarouselSlider(
        options: CarouselOptions(
          height: 200,
          initialPage: 2,
          enableInfiniteScroll: false,
          reverse: false,
          autoPlay: true,
          autoPlayInterval: Duration(seconds: 3),
          autoPlayAnimationDuration: Duration(milliseconds: 800),
          enlargeCenterPage: true,
          scrollDirection: Axis.horizontal,
        ),
        items: [
          'https://charlielawrance.com/wp-content/uploads/2017/10/13-Ad-Examples.jpg',
          'https://webcdn-adespressoinc.netdna-ssl.com/wp-content/uploads/2019/09/fb-collection-ads-2019-1024x536.jpg',
        ].map((i) {
          return Builder(
            builder: (BuildContext context) {
              return Container(
                decoration:
                    BoxDecoration(borderRadius: BorderRadius.circular(10)),
                padding: EdgeInsets.all(0.0),
                height: MediaQuery.of(context).size.height * 0.30,
                width: MediaQuery.of(context).size.width,
                child: GestureDetector(
                  child: CachedNetworkImage(
                    imageUrl: i,
                    placeholder: (context, url) => CupertinoActivityIndicator(),
                    errorWidget: (context, url, error) => Icon(Icons.error),
                  ),
                  onTap: () => Navigator.push<Widget>(
                    context,
                    CupertinoPageRoute(
                      builder: (context) =>
                          CollectionToProduct(category: 'watch'),
                    ),
                  ),
                ),
              );
            },
          );
        }).toList(),
      ),
    );
  }

}

【问题讨论】：

标签： flutter

【解决方案1】：

用ClipRRect 小部件包装您的Image 小部件，并将边框半径赋予ClipRRect

GestureDetector(
        child: ClipRRect(
        borderRadius: BorderRadius.circular(10)
        child:CachedNetworkImage(
        imageUrl: i,
        placeholder: (context, url) => CupertinoActivityIndicator(),
        errorWidget: (context, url, error) => Icon(Icons.error),),
              onTap: () => Navigator.push<Widget>(
                context,
                CupertinoPageRoute(
                  builder: (context) =>
                      CollectionToProduct(category: 'watch'),
                )),
              )

【讨论】：

【解决方案2】：

而不是最外层的Container 将所有内容包装在ClipRRect 小部件中

class BuildCarousel extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(10),
      child: CarouselSlider(
        options: CarouselOptions(
          height: 200,
          initialPage: 2,
          enableInfiniteScroll: false,
          reverse: false,
          autoPlay: true,
          autoPlayInterval: Duration(seconds: 3),
          autoPlayAnimationDuration: Duration(milliseconds: 800),
          enlargeCenterPage: true,
          scrollDirection: Axis.horizontal,
        ),
        items: [
          'https://charlielawrance.com/wp-content/uploads/2017/10/13-Ad-Examples.jpg',
          'https://webcdn-adespressoinc.netdna-ssl.com/wp-content/uploads/2019/09/fb-collection-ads-2019-1024x536.jpg',
        ].map((i) {
          return Builder(
            builder: (BuildContext context) {
              return Container(
                decoration:
                    BoxDecoration(borderRadius: BorderRadius.circular(10)),
                padding: EdgeInsets.all(0.0),
                height: MediaQuery.of(context).size.height * 0.30,
                width: MediaQuery.of(context).size.width,
                child: GestureDetector(
                  child: CachedNetworkImage(
                    imageUrl: i,
                    placeholder: (context, url) => CupertinoActivityIndicator(),
                    errorWidget: (context, url, error) => Icon(Icons.error),
                  ),
                  onTap: () => Navigator.push<Widget>(
                    context,
                    CupertinoPageRoute(
                      builder: (context) =>
                          CollectionToProduct(category: 'watch'),
                    ),
                  ),
                ),
              );
            },
          );
        }).toList(),
      ),
    );
  }
}

ClipRRect 是一个小部件，可以根据需要剪切 Rects 的一角

有关ClipRRect 和其他剪辑方法的更多信息，请访问here

【讨论】：

【解决方案3】：

带有圆形网络图像的轮播滑块

class _CarouselWithIndicatorState extends State<CarouselWithIndicator> {
 int _current = 0;

 @override
Widget build(BuildContext context) {
 Widget image_carousel = new Container(
    height: 345.0,
    child: CarouselSlider(
      options: CarouselOptions(
        height: 250,
        reverse: false,
        autoPlay: true,
        autoPlayInterval: Duration(seconds: 5),
        autoPlayAnimationDuration: Duration(milliseconds: 800),
        autoPlayCurve: Curves.fastOutSlowIn,
        enlargeCenterPage: false,
        onPageChanged: null,
        scrollDirection: Axis.horizontal,
      ),
      items: [
        'http://pic3.16pic.com/00/55/42/16pic_5542988_b.jpg',
        'http://photo.16pic.com/00/38/88/16pic_3888084_b.jpg',
        'http://pic3.16pic.com/00/55/42/16pic_5542988_b.jpg',
        'http://photo.16pic.com/00/38/88/16pic_3888084_b.jpg'
      ].map((i) {
        return Builder(
          builder: (BuildContext context) {
            return Container(
              child: Container(
                  width: MediaQuery.of(context).size.width,
                  margin: EdgeInsets.symmetric(horizontal: 5.0),
                  decoration: BoxDecoration(
                      color: Colors.amber,
                      boxShadow: [ //background color of box
                        BoxShadow(
                          color: Colors.black12,
                          blurRadius: 8.0, // soften the shadow
                          spreadRadius: 8.0, //extend the shadow
                          offset: Offset(
                            -15.0, // Move to right 10  horizontally
                            -15.0, // Move to bottom 10 Vertically
                          ),
                        )
                      ],
                      borderRadius: BorderRadius.all(Radius.circular(30.0)),
                      image:DecorationImage(
                          image: NetworkImage(i),
                          fit: BoxFit.fill
                      ),
                  ),
                  child: GestureDetector(
                      //child: Image.network(i, fit: BoxFit.fill ),
                      onTap: () {
                        // Navigator.push<Widget>(
                        //   context,
                        //   MaterialPageRoute(
                        //     //builder: (context) => ImageScreen(i),
                        //   ),
                        // );
                      })),
            );
          },
        );
      }).toList(),
    ));

return Column(
    children: <Widget>[
      image_carousel,
    ],
);

} }

【讨论】：

【解决方案4】：

用 ClipRRect() 包裹 Carousel 容器并为其添加边框半径。

child: Column(
        children: [
          SizedBox(
            height: MediaQuery.of(context).size.height / 10,
          ),
          ClipRRect(
            borderRadius: BorderRadius.circular(20.0),
            child: Container(
              height: MediaQuery.of(context).size.height / 5,
              width: MediaQuery.of(context).size.width / 1.2,
              child: Carousel(
                images: [
                  NetworkImage(
                      'https://cdn-images-1.medium.com/max/2000/1*GqdzzfB_BHorv7V2NV7Jgg.jpeg'),
                  NetworkImage(
                      'https://cdn-images-1.medium.com/max/2000/1*wnIEgP1gNMrK5gZU7QS0-A.jpeg'),
                  NetworkImage(
                      'https://cdn-images-1.medium.com/max/2000/1*wnIEgP1gNMrK5gZU7QS0-A.jpeg')
                ],
                showIndicator: false,
                borderRadius: false,
                moveIndicatorFromBottom: 180.0,
                noRadiusForIndicator: true,
                overlayShadow: true,
                overlayShadowColors: Color(0xff0D6EFD),
                overlayShadowSize: 0.7,
                radius: Radius.circular(30.0),
              ),
            ),
          ),
          SizedBox(
            height: MediaQuery.of(context).size.height / 10,
          ),
        ],

【讨论】：