12Flutter页面布局 AspectRatio和Cart卡片组件

╰+哭是因爲堅強的太久メ 2023-08-17 15:58 96阅读 0赞

/\*

Flutter AspectRatio、Cart卡片组件：

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

AspectRatio首先会在布局限制条件允许的范围内尽可能的扩展，widget的高度是由宽度和比率决定的。

类似于BoxFit中的contain,按照固定比率去尽量占满区域。

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

\*/

main.dart

![1057166-20190903154433817-700411026.jpg][]

Cart卡片组件：

demo1:

![1057166-20190903155543000-1039989299.jpg][]

main.dart

import 'package:flutter/material.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text(' AspectRatio、Cart卡片组件'),
            ),
            body: HomeContent(),
          ),
        );
      }
    }
    
    class HomeContent extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        //Stack结合align实现布局：
        return ListView(
          children: <Widget>[
            Card(
              child: Column(
                children: <Widget>[
                  ListTile(title: Text('中国'), subtitle: Text('山东')),
                  ListTile(
                    title: Text('青岛'),
                  ),
                  ListTile(
                    title: Text('烟台'),
                  )
                ],
              ),
            ),
            Card(
              child: Column(
                children: <Widget>[
                  ListTile(title: Text('中国'), subtitle: Text('山东')),
                  ListTile(
                    title: Text('青岛'),
                  ),
                  ListTile(
                    title: Text('烟台'),
                  )
                ],
              ),
            )
          ],
        );
      }
    }

demo2:

![1057166-20190903175455132-1088420789.png][]

main.dat

import 'package:flutter/material.dart';

void main() \{

runApp(MyApp());

class MyApp extends StatelessWidget \{

@override

Widget build(BuildContext context) \{

// TODO: implement build

return MaterialApp(

home: Scaffold(

appBar: AppBar(

title: Text(' AspectRatio、Cart卡片组件'),

body: HomeContent(),

);

class HomeContent extends StatelessWidget \{

@override

Widget build(BuildContext context) \{

//Stack结合align实现布局：

return 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),

ListTile(

leading: ClipOval(

child: Image.network('https://www.itying.com/images/flutter/1.png',fit: BoxFit.cover,width: 50,height: 50),

title: Text('data'),

subtitle: Text('data'))

\],

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),

ListTile(

leading: CircleAvatar(

backgroundImage: NetworkImage(

'https://www.itying.com/images/flutter/1.png'),

title: Text('data'),

subtitle: Text('data'))

\],

)

\],

);

demo3:

![1057166-20190903180459043-1026753716.png][]

main.dart

import 'package:flutter/material.dart';
    import 'res/listData.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text(' AspectRatio、Cart卡片组件'),
            ),
            body: HomeContent(),
          ),
        );
      }
    }
    
    class HomeContent extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        //Stack结合align实现布局：
        return 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),
                  ),
                  ListTile(
                      leading: CircleAvatar(
                        backgroundImage: NetworkImage(
                            "${value['imageUrl']}"),
                      ),
                      title: Text("${value['title']}"),
                      subtitle: Text("${value['descripts']}",maxLines:2,overflow: TextOverflow.ellipsis,))
                ],
              ),
            );
          }).toList(),
        );
      }
    }

listData.dart

List listData=[
      {
        "title":"Candy Shop",
        "author":"Mohamed Chahin",
        "imageUrl":"https://www.itying.com/images/flutter/1.png",
        "descripts":"MohamedChahinMohamedChahinMohamedChahinMohamedChahinMohamedChahinMohamedChahinMohamedChahinMohamedChahinMohamedChahinMohamedChahin"
      },
      {
        "title":"Candy Shop",
        "author":"Mohamed Chahin",
        "imageUrl":"https://www.itying.com/images/flutter/2.png",
        "descripts":"MohamedChahinMohamedChahinMohamedChahinMohamedChahinMohamedChahinMohamedChahinMohamedChahinMohamedChahinMohamedChahinMohamedChahin"
      
      },
      {
        "title":"Candy Shop",
        "author":"Mohamed Chahin",
        "imageUrl":"https://www.itying.com/images/flutter/3.png",
        "descripts":"MohamedChahinMohamedChahinMohamedChahinMohamedChahinMohamedChahinMohamedChahinMohamedChahinMohamedChahinMohamedChahinMohamedChahin"
      
      },
      {
        "title":"Candy Shop",
        "author":"Mohamed Chahin",
        "imageUrl":"https://www.itying.com/images/flutter/4.png",
        "descripts":"MohamedChahinMohamedChahinMohamedChahinMohamedChahinMohamedChahinMohamedChahinMohamedChahinMohamedChahinMohamedChahinMohamedChahin"
      
      },{
        "title":"Candy Shop",
        "author":"Mohamed Chahin",
        "imageUrl":"https://www.itying.com/images/flutter/5.png",
        "descripts":"MohamedChahinMohamedChahinMohamedChahinMohamedChahinMohamedChahinMohamedChahinMohamedChahinMohamedChahinMohamedChahinMohamedChahin"
      
      }
    ];

转载于:https://www.cnblogs.com/yiweiyihang/p/11454423.html

[1057166-20190903154433817-700411026.jpg]: /images/20230810/9d4f415520f74f7899289f00591b555c.png
[1057166-20190903155543000-1039989299.jpg]: /images/20230810/0bdc119552ab466aae06aba2d3388325.png
[1057166-20190903175455132-1088420789.png]: /images/20230810/9a34fce8c361422fbe992621b9a35f03.png
[1057166-20190903180459043-1026753716.png]: /images/20230810/adbffae5f551450d8007ee1a76ae03f9.png