flutter问题如何制作响应式卡片？

Question

我想制作响应式卡片，它应该适用于任何移动设备。 我分享了两个屏幕截图，第一个是我的手机屏幕截图，第二个屏幕截图是客户手机的屏幕截图。 我想让所有移动屏幕的 UI 像我的手机一样，但不明白如何做。

这是我的卡代码。

import 'package:cwc/constants/constants.dart';
import 'package:cwc/ui/video/video_player.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class VideoComponentPurple extends StatelessWidget {
  final cwcVideoListData;
  const VideoComponentPurple({Key? key, this.cwcVideoListData}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(18, 5, 18, 5),
      child: GestureDetector(
        onTap: () {
          Navigator.push(
              context, MaterialPageRoute(builder: (context) => VideoApp(cwcVideoListData:cwcVideoListData)));
        },
        child: Container(
          height: 234,
          width: 260,
          decoration: BoxDecoration(
            color: const Color(0xFFC691D3).withOpacity(0.25),
            // color:  Colors.red,
            borderRadius: const BorderRadius.all(
              Radius.circular(10),
            ),
          ),
          child: Padding(
            padding: const EdgeInsets.fromLTRB(10, 10, 10, 10),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  height: 145,
                  width: 300,
                  decoration: BoxDecoration(
                    color: const Color(0xFFC691D3).withOpacity(0.25),
                    // color:  Colors.red,
                    borderRadius: const BorderRadius.all(
                      Radius.circular(10),
                    ),
                    image:  DecorationImage(
                      image: NetworkImage('${cwcVideoListData["coverImage"]}'),
                      fit: BoxFit.cover,
                    ),
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [

                      Center(
                        child: Center(
                          child: Container(
                            height: 45,
                            width: 45,
                            decoration: BoxDecoration(
                              image: const DecorationImage(
                                image: AssetImage('assets/play_icon.png'),
                                fit: BoxFit.cover,
                              ),
                            ),),
                        )
                      ),
                      
                    ],
                  ),
                ),
                SizedBox(
                  height: 10,
                ),
               Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
                 Text(
                   '${cwcVideoListData["title"]}',
                   style: GoogleFonts.poppins(
                       fontWeight: FontWeight.w600,
                       fontSize: 14,
                       color: Color(0xFF444444)),
                 ),
                 Text(
                   '${cwcVideoListData["description"]}',
                   style: GoogleFonts.poppins(
                       fontSize: 12, color: Color(0xFF444444)),maxLines: 2,
                 ),
               ],)
                
              ],
            ),
          ),
        ),
      ),
    );
  }
}

在我的手机（红米5a）中，我得到了这样的卡用户界面。

还有第二部手机的卡片截图。

Answer 1

如果您希望在不同设备/屏幕上获得可比较的结果，则应使用较少的硬编码

width

和

height

。

从您的第一个示例中，我看到您希望封面图像填满屏幕的整个宽度。在这种情况下，您不需要在容器中使用宽度。

更改此：

        children: [
            Container(
              height: 145,
              width: 300,
              decoration: BoxDecoration(
                color: const Color(0xFFC691D3).withOpacity(0.25),
                // color:  Colors.red,
                borderRadius: const BorderRadius.all(
                  Radius.circular(10),
                ),
                image:  DecorationImage(
                  image: NetworkImage('${cwcVideoListData["coverImage"]}'),
                  fit: BoxFit.cover,

对此：

        children: [
            Container(
              height: 145,
              decoration: BoxDecoration(
                color: const Color(0xFFC691D3).withOpacity(0.25),
                // color:  Colors.red,
                borderRadius: const BorderRadius.all(
                  Radius.circular(10),
                ),
                image:  DecorationImage(
                  image: NetworkImage('${cwcVideoListData["coverImage"]}'),
                  fit: BoxFit.cover,

如果您仍然想定义宽度和高度，您可以使用 MediaQuery 类将所有 UI 元素缩放到设备尺寸：

MediaQueryData queryData;
queryData = MediaQuery.of(context);

获取设备屏幕的宽度和高度：

queryData.size.width
queryData.size.height

Answer 2

import 'package:flutter/material.dart';

void main() {
  runApp(const VideoComponentPurple());
}

class VideoComponentPurple extends StatelessWidget {
  const VideoComponentPurple({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SingleChildScrollView(
          child: Column(
            children: [
              ...List.generate(10, (index) {
                return VideoCard(
                  title: index.toString(),
                  description: 'hello world',
                );
              })
            ],
          ),
        ),
      ),
    );
  }
}

class VideoCard extends StatelessWidget {
  final String title;
  final String description;

  const VideoCard({
    Key? key,
    required this.title,
    required this.description,
  }) : super(key: key);

  @override
  Widget build(context) {
    return Container(
      margin: const EdgeInsets.all(16),
      height: 190,
      width: double.infinity,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(6),
        color: Colors.pink[100],
      ),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              margin: const EdgeInsets.only(bottom: 16),
              height: 100,
              width: double.infinity,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(6),
                color: Colors.blue,
              ),
            ),
            Text(title),
            Text(description),
          ],
        ),
      ),
    );
  }
}

Answer 3

使用可以使用responsive_card。它可能会解决你的问题 https://pub.dev/packages/responsive_card