Flutter中AspectRatio、Card 卡片组件

越陌度阡

发布于 2020-12-23 12:51:00

1.7K0

发布于 2020-12-23 12:51:00

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）

1. AspectRatio 组件

AspectRatio 的作用是根据设置调整子元素 child 的宽高比。

AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展，widget 的高度是由宽度和比率决定的，类似于 BoxFit 中的 contain，按照固定比率去尽量占满区域。

如果在满足所有限制条件过后无法找到一个可行的尺寸，AspectRatio 最终将会去优先适应布局限制条件，而忽略所设置的比率。

常见属性：

1. aspectRatio 宽高比。页面最终也许不会按这个值去布局，具体则要看综合因素，这只是一个参考值；

2. child 子组件。值的类型为Widget；

代码示例：

import 'package:flutter/material.dart';

void main(){
    runApp(MyApp());
}

// 抽离成一个单独的组件
class MyApp extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                // 导航条
                appBar:AppBar(title:Text('Flutter App')),
                // 主体
                body:HomeContent(),
            ),
            // 主题
            theme: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}

// AspectRatio组件的用法
class HomeContent extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return AspectRatio(
            // 高度与宽度的比值
            aspectRatio: 5.0/1.0 ,
            child:Container(
                color:Colors.red
            )
        );
    }
}

效果图如下：

2. Card 组件

Card 是卡片组件块，内容可以由大多数类型的 Widget 构成，Card 具有圆角和阴影，这让它看起来有立体感。

常见属性：

1. margin 外边距。类型为EdgeInsets；

2. shape 阴影效果。默认的阴影效果为圆角的长方形边；

3. child 子组件。类型为widget；

代码示例：

import 'package:flutter/material.dart';

void main(){
    runApp(MyApp());
}

// 抽离成一个单独的组件
class MyApp extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                // 导航条
                appBar:AppBar(title:Text('Flutter App')),
                // 主体
                body:HomeContent(),
            ),
            // 主题
            theme: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}


// Card组件的用法
class HomeContent extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return ListView(
            children: <Widget>[
                Card(
                    margin:EdgeInsets.all(10),
                    child:Column(
                        children: <Widget>[
                            ListTile(
                                title:Text(
                                    "张三",
                                    style:TextStyle(fontSize:28)
                                ),
                                subtitle: Text("高级工程师"),
                            ),
                             ListTile(
                                title:Text(
                                    "电话：13999999xxx",
                                    style:TextStyle(fontSize:28)
                                ),
                            ), 
                            ListTile(
                                title:Text(
                                    "北京中关村",
                                    style:TextStyle(fontSize:28)
                                ),
                            )
                        ],
                    )
                ),
                 Card(
                    margin:EdgeInsets.all(10),
                    child:Column(
                        children: <Widget>[
                            ListTile(
                                title:Text(
                                    "李四",
                                    style:TextStyle(fontSize:28)
                                ),
                                subtitle: Text("中级工程师"),
                            ),
                             ListTile(
                                title:Text(
                                    "电话：13666666xxx",
                                    style:TextStyle(fontSize:28)
                                ),
                            ), 
                            ListTile(
                                title:Text(
                                    "北京中关村",
                                    style:TextStyle(fontSize:28)
                                ),
                            )
                        ],
                    )
                )
            ],
        );
    }
}

效果图如下：

3. Card 组件应用实例

利用Card组件实现图文列表。

import 'package:flutter/material.dart';

void main(){
    runApp(MyApp());
}

// 抽离成一个单独的组件
class MyApp extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                // 导航条
                appBar:AppBar(title:Text('Flutter App')),
                // 主体
                body:HomeContent(),
            ),
            // 主题
            theme: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}


// 利用Card组件实现图文列表
class HomeContent extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return ListView(
            children: <Widget>[
                Card(
                    margin:EdgeInsets.all(10),
                    child:Column(
                        children: <Widget>[
                            AspectRatio(
                                // 图片宽高比
                                aspectRatio: 16/9,
                                child:Image.network("http://www.itying.com/images/flutter/1.png",fit: BoxFit.cover), 
                            ),
                            ListTile(
                                leading:ClipOval(
                                    child:Image.network(
                                        "http://www.itying.com/images/flutter/1.png",
                                        fit: BoxFit.cover,
                                        width:40,
                                        height:40
                                    ),
                                ),
                                title:Text("经典传奇"),
                                subtitle:Text("这是新中国第一大案...")
                            )
                        ]
                    )
                ),
                 Card(
                    margin:EdgeInsets.all(10),
                    child:Column(
                        children: <Widget>[
                            AspectRatio(
                                // 图片宽高比
                                aspectRatio: 16/9,
                                child:Image.network("http://www.itying.com/images/flutter/1.png",fit: BoxFit.cover), 
                            ),
                            ListTile(
                                // 圆形头像组件
                                leading:CircleAvatar(
                                    backgroundImage: NetworkImage("http://www.itying.com/images/flutter/1.png"),
                                ),
                                title:Text("经典传奇"),
                                subtitle:Text("这是新中国第一大案...")
                            )
                        ]
                    )
                )
            ]
        );
    }
}

效果图如下：

4. 用本地模拟数据列表实现卡片列表

模拟数据列表：

// lib/res/listData.dart
List listData = [
    {
        "title": 'Candy Shop',
        "author": 'Mohamed Chahin',
        "imageUrl": 'https://www.itying.com/images/flutter/1.png',
        "description":'Flutter is Google’s mobile UI framework for crafting high-quality native experiences on iOS and Android in record time. Flutter works with existing',
    },
    {
        "title": 'Childhood in a picture',
        "author": 'Google',
        "imageUrl": 'https://www.itying.com/images/flutter/2.png',
        "description":'Flutter is Google’s mobile UI framework for crafting high-quality native experiences on iOS and Android in record time. Flutter works with existing',
    },
    {
        "title": 'Alibaba Shop',
        "author": 'Alibaba',
        "imageUrl": 'https://www.itying.com/images/flutter/3.png',
        "description":'Dart is a client-optimized language for fast apps on any platform... Dart is a client-optimized language for fast apps on any platform Optimizedfor',
    },
    {
        "title": 'Candy Shop',
        "author": 'Mohamed Chahin',
        "imageUrl": 'https://www.itying.com/images/flutter/4.png',
        "description":'Dart is a client-optimized language for fast apps on any platform... Dart is a client-optimized language for fast apps on any platform Optimizedfor',
    },
    {
        "title": 'Tornado',
        "author": 'Mohamed Chahin',
        "imageUrl": 'https://www.itying.com/images/flutter/5.png',
        "description":'Flutter is Google’s mobile UI framework for crafting high-quality native experiences on iOS and Android in record time. Flutter works with existing',
    },
    {
        "title": 'Undo',
        "author": 'Mohamed Chahin',
        "imageUrl": 'https://www.itying.com/images/flutter/6.png',
        "description":'Flutter is Google’s mobile UI framework for crafting high-quality native experiences on iOS and Android in record time. Flutter works with existing',
    },
    {
        "title": 'white-dragon',
        "author": 'Mohamed Chahin',
        "imageUrl": 'https://www.itying.com/images/flutter/7.png',
        "description":'Dart is a client-optimized language for fast apps on any platform... Dart is a client-optimized language for fast apps on any platform Optimizedfor',
    }
];

卡片列表示例：

import 'package:flutter/material.dart';
import 'res/listData.dart'; 
void main(){
    runApp(MyApp());
}

// 抽离成一个单独的组件
class MyApp extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                // 导航条
                appBar:AppBar(title:Text('Flutter App')),
                // 主体
                body:HomeContent(),
            ),
            // 主题
            theme: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}

// 渲染数据列表实现卡片列表
class HomeContent extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return ListView(
            // 遍历数据
            children:listData.map((obj){
                return  Card(
                    margin:EdgeInsets.all(10),
                    child:Column(
                        children: <Widget>[
                            AspectRatio(
                                // 图片宽高比
                                aspectRatio: 16/9,
                                child:Image.network(obj["imageUrl"],fit: BoxFit.cover), 
                            ),
                            ListTile(
                                // 圆形头像组件
                                leading:CircleAvatar(
                                    backgroundImage: NetworkImage(obj["imageUrl"]),
                                ),
                                // 标题
                                title:Text(obj["title"]),
                                // 副标题
                                subtitle:Text(
                                    obj["description"],
                                    overflow:TextOverflow.ellipsis,
                                    maxLines:1,
                                )
                            )
                        ]
                    )
                );
            }).toList()
        );
    }
}

效果图如下：

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/12/21 ，如有侵权请联系 cloudcommunity@tencent.com 删除

网站

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

网站

登录后参与评论

0 条评论

热度