flutter组件 RefreshIndicator,Opacity,ClipOval,ClipRRect

最新推荐文章于 2024-08-01 23:42:20 发布

litter_lj

最新推荐文章于 2024-08-01 23:42:20 发布

阅读量879

点赞数

分类专栏： flutter 文章标签： ClipRRect ClipOval Opacity RefreshIndicator

本文链接：https://blog.csdn.net/litter_lj/article/details/98876340

版权

flutter 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

1.RefreshIndicator

 const RefreshIndicator({

    Key key,

    @required this.child, //子集

    this.displacement = 40.0, //触发下拉刷新的距离

    @required this.onRefresh, //下拉回调方法,方法需要有async和await关键字，没有await，刷新图标立马消失，没有async，刷新图标不会消失

    this.color, //进度指示器前景色 默认为系统主题色

    this.backgroundColor, //背景色

    this.notificationPredicate = defaultScrollNotificationPredicate,

    this.semanticsLabel,
    this.semanticsValue,
})

import 'package:flutter/material.dart';

class MyIos extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _MyIos();
  }
}

class _MyIos extends State<MyIos> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Layout"),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            flex: 1,
            child: RefreshIndicator(
              child: ListView.builder(
                itemCount: 100,
                itemExtent: 50.0,
                itemBuilder: (ctx, i) {
                  return Text("数据$i");
                },
              ),
              onRefresh: () async {
                await Future.delayed(Duration(milliseconds: 2000));
                print("加载数据");
              },
            ),
          ),
        ],
      ),
    );
  }
}

2.Opacity

const Opacity({
    Key key,
    @required this.opacity, //透明度 0-1
    this.alwaysIncludeSemantics = false,
    Widget child,
})

//透明

Opacity(
   opacity: 0.5,
   child: Container(
      width: 100.0,
      height: 100.0,
      color: Colors.red,
   ),
)

3.ClipOval 椭圆裁剪图片1：1的时候可以裁剪成圆形

ClipOval({ Key key, this.clipper, this.clipBehavior = Clip.antiAlias, Widget child })

//clipper 路径

import 'package:flutter/material.dart';

class MyIos extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _MyIos();
  }
}

class _MyIos extends State<MyIos> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Layout"),
      ),
      body: Column(
        children: <Widget>[
          ClipOval(
            child: Image.asset("images/test.jpg"),
            clipBehavior: Clip.antiAliasWithSaveLayer,
          ),
          ClipOval(
            child: Image.asset(
              "images/test.jpg",
              width: 150.0,
              height: 150.0,
            ),
            clipBehavior: Clip.antiAliasWithSaveLayer,
          ),
          ClipOval(
            child: Image.asset(
              "images/2.jpg",
              width: 100.0,
              height: 100.0,
            ),
            clipBehavior: Clip.antiAliasWithSaveLayer,
          ),
        ],
      ),
    );
  }
}

4.ClipRRect 矩形圆角

const ClipRRect({
    Key key,
    this.borderRadius,  //圆角大小
    this.clipper,
    this.clipBehavior = Clip.antiAlias,
    Widget child,
})

ClipRRect(
    borderRadius: new BorderRadius.all(new Radius.circular(10.0)),
    child: SizedBox(
    width: 100.0,
    height: 100.0,
    child: Image.asset(
       "images/2.jpg",
    )),
),