40个flutter入门实例详解(六)

最新推荐文章于 2023-10-17 22:28:14 发布

PJJ彭彭彭

最新推荐文章于 2023-10-17 22:28:14 发布

阅读量464

点赞数

CC 4.0 BY-SA版权

分类专栏：培训

本文链接：https://blog.youkuaiyun.com/qq_37822034/article/details/106587116

培训专栏收录该内容

41 篇文章

订阅专栏

本文详细介绍使用Flutter实现各种UI效果的方法，包括旋转、缩放、剪裁图片、滚动条、无限滚动列表、二维网格列表等，展示了丰富的视觉效果和交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

29.旋转

import 'dart:math' as math;
DecoratedBox(
        decoration:BoxDecoration(color: Colors.red),
        child: Transform.rotate(
          //顺时针旋转90度
          angle: math.pi/2,
          child: Text("Hello world"),
        ),
      )

效果：

30.缩放

DecoratedBox(
  decoration:BoxDecoration(color: Colors.red),
  child: Transform.scale(
      scale: 1.5, //放大到1.5倍
      child: Text("Hello world")
  )
);

效果：

31.剪裁图片

class ClipTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 头像  
    Widget avatar = Image.asset("images/asd.png", width: 60.0);
    return Center(
      child: Column(
        children: <Widget>[
          avatar, //不剪裁
          ClipOval(child: avatar), //剪裁为圆形
          ClipRRect( //剪裁为圆角矩形
            borderRadius: BorderRadius.circular(5.0),
            child: avatar,
          ), 
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ClipRect(//将图片溢出的那一半剪裁
                child: Align(
                  alignment: Alignment.topLeft,
                  widthFactor: .5,//容器宽度设为原来宽度一半
                  child: avatar,
                ),
              ),
              Text("你好世界",style: TextStyle(color: Colors.green))
            ],
          ),
        ],
      ),
    );
  }
}

效果：

32.滚动条

class SingleChildScrollViewTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    return Scrollbar( // 显示进度条
      child: SingleChildScrollView(//只能接收一个子组件，滚动方向默认是垂直方向
        padding: EdgeInsets.all(16.0),
        child: Center(
          child: Column( 
            //动态创建一个List<Widget>  
            children: str.split("") 
                //每一个字母都用一个Text显示,字体为原来的两倍
                .map((c) => Text(c, textScaleFactor: 2.0,)) 
                .toList(),
          ),
        ),
      ),
    );
  }

效果：

33.滚动显示数据源的数据(常用)

class InfiniteListView extends StatefulWidget {
  @override
  _InfiniteListViewState createState() => new _InfiniteListViewState();
}

class _InfiniteListViewState extends State<InfiniteListView> {
  static const loadingTag = "##loading##"; //表尾标记
  var _words = <String>[loadingTag];
  //在构建组件树之前先拉取数据
  @override
  void initState() {
    super.initState();
    _retrieveData();
  }

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      //显示总条数
      itemCount: _words.length,
      itemBuilder: (context, index) {
        //如果到了表尾
        if (_words[index] == loadingTag) {
          //不足100条，继续获取数据
          if (_words.length - 1 < 100) {
            //获取数据
            //有个有趣的地方，第一次通过initState调用了_retrieveData，但要5秒后才执行setState，
            //在执行setState之前程序就已经走到这里了，所以又调用了一次_retrieveData，也是5秒后才执行setState，
            //所以不拖动滚动轮的情况下，一开始就有40条数据
            _retrieveData();
            //显示圆形加载圈，当5秒延迟过后，setState起作用了，重新build，这个圆圈会消失
            return Container(
              padding: const EdgeInsets.all(16.0),
              alignment: Alignment.center,
              child: SizedBox(
                  width: 24.0,
                  height: 24.0,
                  child: CircularProgressIndicator(strokeWidth: 2.0)
              ),
            );
          } else {
            //已经加载了100条数据，不再获取数据。
            return Container(
                alignment: Alignment.center,
                padding: EdgeInsets.all(16.0),
                child: Text("没有更多了", style: TextStyle(color: Colors.grey),)
            );
          }
        }
        //显示单词列表项
        return ListTile(title: Text(_words[index]));
      },
      separatorBuilder: (context, index) => Divider(height: .0),
    );
  }

  void _retrieveData() {
    //在5秒后执行setState
    Future.delayed(Duration(seconds: 5)).then((e) {
      setState(() {
        //在_words最后的表尾标志前插入获取的字符串数组
        _words.insertAll(_words.length - 1,
          //每次生成20个单词
          generateWordPairs().take(20).map((e) => e.asPascalCase).toList()
          );
      });
    });
  }

}

效果：

34.二维网格列表

GridView(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 4, //横轴4个子widget
            childAspectRatio: 1.0 //宽高比为1时，子widget
        ),
        children:<Widget>[
          Icon(Icons.ac_unit),
          Icon(Icons.airport_shuttle),
          Icon(Icons.all_inclusive),
          Icon(Icons.beach_access),
          Icon(Icons.cake),
          Icon(Icons.free_breakfast)
        ]
      ),

效果：