Question

我是 flutter 的新手，想从照片中学习如何适应任何弯曲的屏幕。我无法适应向左弯曲，如何将此形状适应所有可能的屏幕？我不知道为什么，但左侧不适合我需要帮助或提示。

class StartAfterRegister extends StatelessWidget {
 static Route route() {
return MaterialPageRoute<void>(builder: (_) => StartAfterRegister());
}

@override
 Widget build(BuildContext context) {
return Scaffold(body: _profilePage(context));
}
}

 Widget _profilePage(BuildContext context) {
  return SafeArea(
    child: Center(
      child: Column(
       children: [
      const SizedBox(height: 452),
      _curved(),
    ],
  ),
),
 );
 // });
}

Widget _curved() {
 return Container(
// padding: const EdgeInsets.all(8.0),
// child: Padding(
// margin: const EdgeInsets.only(left: 0.0, right: 28.0),
// const EdgeInsets.fromLTRB(0, 10, 25, 10),
  child: CustomPaint(
    size: Size(600, (320* 1.1617600000000001).toDouble()),
    //You can Replace [WIDTH] with your desired width for
    // Custom Paint and height will be calculated automatically
    painter: RPSCustomPainter(),
  ),
);
 }

代码是用这个页面生成的：https://fluttershapemaker.com/ 我不知道我哪里出错了，错误的部分？

import 'dart:ui' as ui;

import 'package:flutter/cupertino.dart';
 import 'package:flutter_login/components/theme/colors.dart';

 class RPSCustomPainter extends CustomPainter {
  @override
void paint(Canvas canvas, Size size) {

Path path_0 = Path();
path_0.moveTo(size.width*1.071853,size.height*1.035738);
path_0.lineTo(size.width*0.07250032,size.height*1.035738);
path_0.lineTo(size.width*0.07250032,size.height*0.3868996);
path_0.cubicTo(size.width*0.07241850,size.height*0.3325917,size.width*0.09748933,size.height*0.2804976,size.width*0.1421620,size.height*0.2421464);
path_0.cubicTo(size.width*0.1969324,size.height*0.1950013,size.width*0.2692701,size.height*0.1829006,size.width*0.3079311,size.height*0.1816967);
path_0.cubicTo(size.width*0.5894098,size.height*0.1729377,size.width*0.8344350,size.height*0.1919213,size.width*0.9302565,size.height*0.1649115);
path_0.cubicTo(size.width*0.9696772,size.height*0.1538054,size.width*1.040485,size.height*0.1192928,size.width*1.071848,size.height*0.03573744);
path_0.cubicTo(size.width*1.069587,size.height*0.2428419,size.width*1.074102,size.height*0.8286341,size.width*1.071853,size.height*1.035738);
path_0.close();

Paint paint_0_fill = Paint()..style=PaintingStyle.fill;
paint_0_fill.color = teal ;
canvas.drawPath(path_0,paint_0_fill);

 }


@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}

Answer 1

**您的自定义形状有问题，如果您想创建更多形状，请确保设置宽度和大小 **
像这样

只需将此代码添加到自定义画家


class RPSCustomPainter extends CustomPainter {
 @override
 void paint(Canvas canvas, Size size) {
   Paint paint_0 = new Paint()
     ..color = Color.fromARGB(255, 33, 150, 243)
     ..style = PaintingStyle.fill
     ..strokeWidth = 1;

   Path path_0 = Path();
   path_0.moveTo(size.width, size.height);
   path_0.lineTo(size.width * 0.0012500, size.height * 0.9942857);
   path_0.lineTo(size.width * 0.0012500, size.height * 0.4271429);
   path_0.quadraticBezierTo(size.width * 0.0740625, size.height * 0.2807143,
       size.width * 0.1950000, size.height * 0.2800000);
   path_0.quadraticBezierTo(size.width * 0.8515625, size.height * 0.3560714,
       size.width * 0.9962500, size.height * 0.2828571);
   path_0.quadraticBezierTo(size.width * 0.9990625, size.height * 0.2850000,
       size.width, size.height * 0.2857143);
   path_0.quadraticBezierTo(size.width * 1.0084375, size.height * 0.4992857,
       size.width, size.height);
   path_0.close();

   canvas.drawPath(path_0, paint_0);
 }

 @override
 bool shouldRepaint(covariant CustomPainter oldDelegate) {
   return true;
 }
}

**在你的孩子中添加这个**

import 'package:flutter/material.dart';

class Demo extends StatefulWidget {
  const Demo({Key? key}) : super(key: key);

  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  @override
  Widget build(BuildContext context) {
    /// this is the width of screen 
    var width = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(),
      body: Stack(
        children: [
          Align(
              alignment: Alignment.bottomLeft,
              child: Container(
                color: Colors.red,
                width: width,
                child: CustomPaint(
                  size: Size((width).toDouble(), (width * 0.875).toDouble()),
                  painter: RPSCustomPainter(),
                ),
              ))
        ],
      ),
    );
  }
}

如何适应任何弯曲的屏幕？ - 颤振

1 个答案: