วิธีการวาดเส้นด้วยปลายแหลม / เส้นไล่ระดับ / กระพือปีก?

Aug 20 2020

การใช้วิธีเส้นขีดจะสร้างเส้นไล่ระดับด้วยปลายแหลมในการกระพือได้อย่างไร? ฉันต้องการวาดเส้นด้านล่างด้วยการกระพือปีก

คำตอบ

4 sleepingkit Aug 20 2020 at 09:46

ใช้ CustomPainter เพื่อวาด:

import 'package:flutter/material.dart';

void main() => runApp(Example());

class Example extends StatefulWidget {
  @override
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
      child: CustomPaint(
        size: Size(200, 5),
        painter: CurvePainter(),
      ),
    )));
  }

  @override
  void dispose() {
    super.dispose();
  }
}

class CurvePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint();
    paint.color = Colors.black;
    paint.style = PaintingStyle.fill; // Change this to fill

    var path = Path();

    path.moveTo(0, 0);
    path.quadraticBezierTo(size.width / 2, size.height / 2, size.width, 0);
    path.quadraticBezierTo(size.width / 2, -size.height / 2, 0, 0);

    canvas.drawPath(path, paint);
  }

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

jack Aug 20 2020 at 09:18

ไม่เห็นรูปภาพของคุณคุณสามารถใช้วิดเจ็ต CustomPaint เพื่อวาดเส้นกำหนดคลาสที่ขยาย CustomPainter และใช้เมธอด canvas.drawLine ()

AbubakrElghazawy Aug 20 2020 at 12:19

คลาสแบ่ง

เส้นแนวนอนบาง ๆ มีช่องว่างด้านใดด้านหนึ่ง

ในภาษาการออกแบบวัสดุสิ่งนี้แสดงถึงตัวแบ่ง ตัวแบ่งสามารถใช้ในรายการลิ้นชักและที่อื่น ๆ เพื่อแยกเนื้อหาได้

ในการสร้างตัวแบ่งระหว่างรายการ ListTile ให้พิจารณาใช้ ListTile.divideTiles ซึ่งเหมาะสำหรับกรณีนี้

ความสูงทั้งหมดของกล่องถูกควบคุมโดยความสูง ช่องว่างภายในที่เหมาะสมจะคำนวณโดยอัตโนมัติจากความสูง

    [![// Flutter code sample for Divider

// This sample shows how to display a Divider between an orange and blue box
// inside a column. The Divider is 20 logical pixels in height and contains a
// vertically centered black line that is 5 logical pixels thick. The black
// line is indented by 20 logical pixels.
//
// !\[\](https://flutter.github.io/assets-for-api-docs/assets/material/divider.png)

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: MyStatelessWidget(),
      ),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
  MyStatelessWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>\[
          Expanded(
            child: Container(
              color: Colors.amber,
              child: const Center(
                child: Text('Above'),
              ),
            ),
          ),
          const Divider(
            color: Colors.black,
            height: 20,
            thickness: 5,
            indent: 20,
            endIndent: 0,
          ),
          Expanded(
            child: Container(
              color: Colors.blue,
              child: const Center(
                child: Text('Below'),
              ),
            ),
          ),
        \],
      ),
    );
  }
}]

ดูข้อมูลวิธีการเปลี่ยนสไตล์ป้อนคำอธิบายลิงก์ที่นี่