flutter学习AspectRatioCard卡片组件

Posted 临风而眠

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了flutter学习AspectRatioCard卡片组件相关的知识，希望对你有一定的参考价值。

Flutter学习(8) AspectRatio、Card 卡片组件

文章目录

一、Flutter AspectRatio 组件

  • 子元素的宽高比是相对于父元素来说的

    import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  const MyApp(Key? key) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text('FlutterDemo')),
      body: LayoutDemo(),
    ));
  


class LayoutDemo extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Container(
      width: 200,
      
      child: AspectRatio(
          aspectRatio: 2.0 / 1.0, child: Container(color: Colors.cyanAccent)),
    );

  • 有时候要铺满屏幕的宽度，然后自动对应宽高比，可以像下面这样写：

    class LayoutDemo extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Container(
      child: AspectRatio(
          aspectRatio: 3.0 / 1.0, child: Container(color: Colors.cyanAccent)),
    );

二、Flutter Card 组件

卡片组件属性

demo


class LayoutDemo extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return ListView(
      //ListView里面没法继续嵌套ListView
      children: <Widget>[
        Card(
          margin: EdgeInsets.all(10),
          child: Column(children: <Widget>[
            ListTile(
                title: Text("张三", style: TextStyle(fontSize: 28)),
                subtitle: Text("高级工程师")),
            Divider(),
            ListTile(
              title: Text("电话:121312"),
            ),
            ListTile(title: Text("地址:北京海淀"))
          ]),
        ),
        Card(
          margin: EdgeInsets.all(10),
          child: Column(children: <Widget>[
            ListTile(
                title: Text("李四", style: TextStyle(fontSize: 28)),
                subtitle: Text("高级工程师")),
            Divider(),
            ListTile(
              title: Text("电话:121312"),
            ),
            ListTile(title: Text("地址:北京海淀"))
          ]),
        )
      ],
    );

图文卡片demo

class LayoutDemo extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return ListView(
      //ListView里面没法继续嵌套ListView
      children: <Widget>[
        Card(
          margin: EdgeInsets.all(10),
          child: Column(children: <Widget>[
            Image.network(""),
            ListTile(
              leading: Icon(Icons.list, color: Colors.cyan),
              title: Text("图片1"),
              subtitle: Text("嘿嘿"),
            )
          ]),
        )
      ],
    );

这样子的问题是没法控制图片的宽高比，于是把Image.network放进AspectRatio组件

class LayoutDemo extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return ListView(
      //ListView里面没法继续嵌套ListView
      children: <Widget>[
        Card(
          margin: EdgeInsets.all(10),
          child: Column(children: <Widget>[
            AspectRatio(
              aspectRatio: 16 / 9,
              child: Image.network(
                  "https://www.itying.com/images/flutter/1.png",
                  fit: BoxFit.cover //让Image.network铺满AspectRatio
                  ),
            ),
            ListTile(
              leading: Icon(Icons.list, color: Colors.cyan),
              title: Text("图片1"),
              subtitle: Text("嘿嘿"),
            )
          ]),
        )
      ],
    );

  • 多加几张图片

    import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  const MyApp(Key? key) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text('FlutterDemo')),
      body: LayoutDemo(),
    ));
  


class LayoutDemo extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return ListView(
      //ListView里面没法继续嵌套ListView
      children: <Widget>[
        Card(
          margin: EdgeInsets.all(10),
          child: Column(children: <Widget>[
            AspectRatio(
              aspectRatio: 16 / 9,
              child: Image.network(
                  "https://www.itying.com/images/flutter/1.png",
                  fit: BoxFit.cover //让Image.network铺满AspectRatio
                  ),
            ),
            ListTile(
              leading: ClipOval(
                  child: Image.network(
                      "https://www.itying.com/images/flutter/1.png",
                      fit: BoxFit.cover,
                      height: 60,
                      width: 60)),
              title: Text("图片1"),
              subtitle: Text("嘿嘿"),
            )
          ]),
        ),
        Card(
          margin: EdgeInsets.all(10),
          child: Column(children: <Widget>[
            AspectRatio(
              aspectRatio: 16 / 9,
              child: Image.network(
                  "https://www.itying.com/images/flutter/2.png",
                  fit: BoxFit.cover //让Image.network铺满AspectRatio
                  ),
            ),
            ListTile(
              leading: ClipOval(
                  child: Image.network(
                      "https://www.itying.com/images/flutter/2.png",
                      fit: BoxFit.cover,
                      height: 60,
                      width: 60)),
              title: Text("图片2"),
              subtitle: Text("嘿嘿"),
            )
          ]),
        ),
        Card(
          margin: EdgeInsets.all(10),
          child: Column(children: <Widget>[
            AspectRatio(
              aspectRatio: 16 / 9,
              child: Image.network(
                  "https://www.itying.com/images/flutter/5.png",
                  fit: BoxFit.cover //让Image.network铺满AspectRatio
                  ),
            ),
            ListTile(
              leading: ClipOval(
                  child: Image.network(
                      "https://www.itying.com/images/flutter/5.png",
                      fit: BoxFit.cover,
                      height: 60,
                      width: 60)),
              title: Text("图片3"),
              subtitle: Text("嘿嘿"),
            )
          ]),
        )
      ],
    );
    - 圆形图片处理方式2 
    ListTile(
              leading: CircleAvatar(
                backgroundImage:
                    NetworkImage("https://www.itying.com/images/flutter/5.png"),
              ),
              title: Text("图片3"),
              subtitle: Text("嘿嘿"),
            )

将列表中的数据渲染进去 ，生成动态卡片列表

  • 列表listData.dart

    List listData = [
  
    "title": 'Candy Shop',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/1.png',
  ,
  
    "title": 'Childhood in a picture',
    "author": 'Google',
    "imageUrl": 'https://www.itying.com/images/flutter/2.png',
  ,
  
    "title": 'Alibaba Shop',
    "author": 'Alibaba',
    "imageUrl": 'https://www.itying.com/images/flutter/3.png',
  ,
  
    "title": 'Candy Shop',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/4.png',
  ,
  
    "title": 'Tornado',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/5.png',
  ,
  
    "title": 'Undo',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/6.png',
  ,
  
    "title": 'white-dragon',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/7.png',
  
];

  • 代码

    import 'package:flutter/material.dart';
import 'res/listData.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  const MyApp(Key? key) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text('FlutterDemo')),
      body: LayoutDemo(),
    ));
  


class LayoutDemo extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return ListView(
      //ListView里面没法继续嵌套ListView
      children: listData.map((value) 
        return Card(
          margin: EdgeInsets.all(10),
          child: Column(children: <Widget>[
            AspectRatio(
              aspectRatio: 16 / 9,
              child: Image.network(value["imageUrl"],
                  fit: BoxFit.cover //让Image.network铺满AspectRatio
                  ),
            ),
            ListTile(
              leading: CircleAvatar(
                backgroundImage: NetworkImage(value["imageUrl"]),
              ),
              title: Text(value["title"]),
              subtitle: Text(value["author"]),
            )
          ]),
        );
      ).toList(),
    );

  • 效果

    ),
        ),
        ListTile(
          leading: CircleAvatar(
            backgroundImage: NetworkImage(value["imageUrl"]),
          ),
          title: Text(value["title"]),
          subtitle: Text(value["author"]),
        )
      ]),
    );
  ).toList(),
);

  • 效果

以上是关于flutter学习AspectRatioCard卡片组件的主要内容，如果未能解决你的问题，请参考以下文章

强制 TabController 创建所有选项卡 Flutter

Flutter - 选项卡上的动态高度

Flutter 灵活卡

Flutter：BottomNavigationBar在选项卡更改时重建页面

检测用户是不是进入或退出 Flutter 中的选项卡

Flutter - 在选项卡之间移动导致丢失状态