>source

나는 더 익숙하다클립패스위젯, 하지만 이것의 도움으로 모서리를 둥글게 만들거나 테두리를 둥글게 만들 수 있습니다. 나는 이것이 해결될 것이라는 것을 안다.클립패스또는커스텀페인터위젯. 하지만 어떻게 해야할지 모릅니다.

예상 이미지:

실제 결과:

code:


import 'package:flutter/material.dart';
void main()=> runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const SampleExample(),
    );
  }
}
  class SampleExample extends StatelessWidget {
    const SampleExample({ Key? key }) : super(key: key);
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        backgroundColor: Colors.red,
        body:  Container(
          alignment: Alignment.bottomCenter,
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          child: Container(
              height: 250.0,
              decoration:  BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.vertical(
                  top: Radius.elliptical(
                        MediaQuery.of(context).size.width, 120.0)),
              ),
            ),
        ),
      );
    }
  }

  • 답변 # 1

    이를 수행할 수 있는 한 가지 방법은 다음을 사용하는 것과 같습니다.커스텀페인터.

    class SampleExample extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return const Scaffold(
          backgroundColor: Colors.red,
          body: Align(
            alignment: Alignment.bottomCenter,
            child: CustomPaint(
              painter: MyCustomPainter(),
              child: SizedBox(
                width: double.infinity,
                height: 250,
                child: Center(child: Text('Cool!')),
              ),
            ),
          ),
        );
      }
    }
    class MyCustomPainter extends CustomPainter {
      const MyCustomPainter();
      @override
      void paint(Canvas canvas, Size size) {
        final paint= Paint()
          ..color= Colors.white
          ..style= PaintingStyle.fill;
        final path= Path()
          ..moveTo(0, 0)
          ..quadraticBezierTo(size.width /2, size.height /4, size.width, 0)
          ..lineTo(size.width, size.height)
          ..lineTo(0, size.height)
          ..close();
        canvas.drawPath(path, paint);
      }
      @override
      bool shouldRepaint(covariant CustomPainter oldDelegate) {
        return true;
      }
    }
    

    감사합니다 선생님, 이것이 바로 제가 원하는 것입니다.

    Shruti Ramnandan Sharma2022-02-15 06:16:32
  • 답변 # 2

        @override
          Widget build(BuildContext context) {
            return Scaffold(
              body: SafeArea(
                child: ClipPath(
                  clipper: CurveClipper(),
                  child: Container(
                    color: Colors.lightGreen,
                    height: 250.0,
                    child: Center(
                        child: Padding(
                          padding: EdgeInsets.only(bottom: 50),
                          child: Text(
                            "Curved View",
                            style: TextStyle(
                              fontSize: 25,
                              color: Colors.white,
                            ),
                          ),
                        )),
                  ),
                ),
              ),
            );
          }
        }
     class CurveClipper extends CustomClipper<Path> {
          @override
          Path getClip(Size size) {
            int curveHeight= 40;
            Offset controlPoint= Offset(size.width /2, size.height + curveHeight);
            Offset endPoint= Offset(size.width, size.height -curveHeight);
            Path path= Path()
              ..lineTo(0, size.height -curveHeight)
              ..quadraticBezierTo(controlPoint.dx, controlPoint.dy, endPoint.dx, endPoint.dy)
              ..lineTo(size.width, 0)
              ..close();
            return path;
          }
          @override
          bool shouldReclip(CustomClipper<Path> oldClipper)=> false;
        }
    

  • 답변 # 3

    켜기장식> 테두리 반경바꾸다맨 위~와 함께맨 아래그리고 사용정렬: Alignment.topCenter대신에하단센터몸에컨테이너.

    body: Container(
      alignment: Alignment.topCenter,
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      child: Container(
        height: 250.0,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.vertical(
              bottom: Radius.elliptical(
                  MediaQuery.of(context).size.width, 120.0)),
        ),
      ),
    ),
    

  • 답변 # 4

    Stack 위젯을 사용하여 원하는 레이아웃을 구현했습니다.

    • 흰색 배경 그리기
    • 누적된 하단 타원형 빨간색 사각형 위젯

    import 'package:flutter/material.dart';
    void main()=> runApp(MyApp());
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: const SampleExample(),
        );
      }
    }
    class SampleExample extends StatelessWidget {
      const SampleExample({Key key}) : super(key: key);
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: Colors.white,
          body: Stack(
            children: [
              Container(
                height: 250.0,
                decoration: BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.vertical(
                      bottom: Radius.elliptical(
                          MediaQuery.of(context).size.width, 120.0)),
                ),
              ),
            ],
          ),
        );
      }
    }
    

  • 이전 Ocaml에서 집합에 함수를 배치하려면 어떻게 해야 합니까?
  • 다음 c# : 크기가 64KB를 초과하는 요청이 완료되지 않음(Asp.Net Core Web API)