วิธีการวาดเส้นด้วยปลายแหลม / เส้นไล่ระดับ / กระพือปีก?
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 ซึ่งเหมาะสำหรับกรณีนี้
ความสูงทั้งหมดของกล่องถูกควบคุมโดยความสูง ช่องว่างภายในที่เหมาะสมจะคำนวณโดยอัตโนมัติจากความสูง
[
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'),
),
),
),
\],
),
);
}
}]
ดูข้อมูลวิธีการเปลี่ยนสไตล์ป้อนคำอธิบายลิงก์ที่นี่