如何在Flutter中实现这种安排?[关闭]

nhhxz33t  于 2023-02-05  发布在  Flutter
关注(0)|答案(1)|浏览(103)

已关闭。此问题需要超过focused。当前不接受答案。
**想要改进此问题吗?**更新此问题,使其仅关注editing this post的一个问题。

昨天关门了。
Improve this question
我想做这个设计,但我想知道如何让它在抖动的同时仍然响应。我想使用一个堆栈连同一个定位的小部件,但它可能会在更大/更小的屏幕上崩溃。x1c 0d1x

qoefvg9y

qoefvg9y1#

Stacks可能有用,但看看我做了什么:

我创建了三个名为RankingWidget的小部件,它们基本上是一个Column小部件,包含图像、名称、分数,然后是一个以列深度(上面的灰色区域)形式表示的CustomPaint形状,后面是一个Container小部件,用于获取排名的高度(您可以对其进行任何所需的计算;我只是举个例子)。
这些RankingWidget小部件使用水平布局;每一个都被包裹在一个Expanded内以获得更好的空间分布。
如果您想在多个外形上呈现它,您仍然必须实现一些响应式设计,但希望这能作为灵感。
在这里查看Gist;你可以在DartPad中看到它,但它看起来是这样的:

完整代码也是:

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: RankingApp()
      ),
    );
  }
}

class RankingApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(20),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisAlignment: MainAxisAlignment.center,
        children: const [
          Expanded(
            child: RankingWidget(
              image: '',
              name: 'Rihana',
              score: 12200,
              level: 2
            ),
          ),
          Expanded(
            child: RankingWidget(
              image: '',
              name: 'Elsa',
              score: 12320,
              level: 1
            ),
          ),
          Expanded(
            child: RankingWidget(
              image: '',
              name: 'Mesfin',
              score: 12100,
              level: 3
            )
          )
        ]
      )
    );
  }
}

class RankingWidget extends StatelessWidget {
  
  final String image;
  final String name;
  final double score;
  final int level;
  
  const RankingWidget({ super.key, 
                       required this.image, 
                       required this.name, 
                       required this.score,
                        required this.level
                      });
  
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Column(
          children: [
            ClipOval(
              child: Container(
                width: 100,
                height: 100,
                color: Colors.grey
              )
            ),
            const SizedBox(height: 10),
            Text(name, style: const TextStyle(color: Color(0xFF1A415A), fontWeight: FontWeight.bold)),
            const SizedBox(height: 10),
            Text('$score', style: const TextStyle(color: Color(0xFF1A415A))),
            const SizedBox(height: 10),
          ]
        ),
        CustomPaint(
          child: const SizedBox(height: 50),
          painter: RankingTop(rank: level)
        ),
        Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              colors: [
                Color(0xFFD97931),
                Color(0xFFEF9345)
             ],
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter
            )
          ),
          height: 300 / level,
          alignment: Alignment.center,
          padding: const EdgeInsets.all(30),
          child: Text('$level', 
                      textAlign: TextAlign.center, 
                      style: TextStyle(color: 
                                             Colors.white, 
                                             fontSize: (100 / level).toDouble()))
        )
      ]
    );
  }
}

class RankingTop extends CustomPainter {
  
  final int rank;
  const RankingTop({ required this.rank });
  
  @override
  void paint(Canvas canvas, Size size) {
    var path = Path();
    var paint = Paint()
    ..color = Colors.grey.withOpacity(0.5)
    ..style = PaintingStyle.fill;
    
    
    
    var points = [
      rank == 1 || rank == 2 ? Offset(0, size.height) : Offset(0, 0),
      Offset(50, 0),
      rank == 1 || rank == 3 ? Offset(size.width - 50, 0) : Offset(size.width, 0),
      Offset(size.width, size.height),
      Offset(0, size.height),
    ];
    path.addPolygon(points, true);
    canvas.drawPath(path, paint);
  }
  
  @override
  bool shouldRepaint(covariant RankingTop oldDelegate) => false;
}

相关问题