任何知道如何在单击第一个箭头时进行这样的设计的人， 出现一个屏幕，完成该屏幕后选项卡颜色变为绿色， 然后单击第二个箭头出现第二个屏幕， 然后单击第三个箭头后出现第三个屏幕， 只是像标签屏幕一样工作，我如何在 flutter 中实现这一点？
class MainUiPage extends StatefulWidget {
const MainUiPage({Key? key}) : super(key: key);
@override
_MainUiPageState createState() => _MainUiPageState();
}
class _MainUiPageState extends State<MainUiPage> with SingleTickerProviderStateMixin{
TabController? _tabController;
@override
void initState() {
_tabController = TabController(length: 3, vsync: this);
super.initState();
}
@override
void dispose() {
super.dispose();
_tabController?.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: /*Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
// give the tab bar a height [can change hheight to preferred height]
Container(
height: 45,
decoration: BoxDecoration(
color: Colors.grey[300],
// borderRadius: BorderRadius.circular(
// 25.0,
// ),
),
child: TabBar(
controller: _tabController,
// give the indicator a decoration (color and border radius)
indicator: BoxDecoration(
borderRadius: BorderRadius.circular(
25.0,
),
color: Colors.green,
),
labelColor: Colors.white,
unselectedLabelColor: Colors.black,
tabs: [
// first tab [you can add an icon using the icon property]
Tab(
text: 'Place Bid',
),
// second tab [you can add an icon using the icon property]
Tab(
text: 'Buy Now',
),
Tab(
text: 'Buy Now',
),
],
),
),
// tab bar view here
Expanded(
child: TabBarView(
controller: _tabController,
children: [
// first tab bar view widget
Center(
child: Text(
'Place Bid',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.w600,
),
),
),
// second tab bar view widget
Center(
child: Text(
'Buy Now',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.w600,
),
),
),
// second tab bar view widget
Center(
child: Text(
'Buy Now',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.w600,
),
),
),
],
),
),
],
),
),*/
Row(
children: [
SizedBox(width: 15.w,),
SizedBox(
height: 250.h,
width: 70.w,
child: CustomPaint (
painter: RPSCustomPainter1(),
child: Align(
alignment: Alignment(-.2, -0.1), //litle left
child: Text(
"machines",
style: TextStyle(
fontSize: 18.sp,
),
),
),
),
),
SizedBox(
height: 250.h,
width: 70.w,
child: CustomPaint(
painter: RPSCustomPainter2(),
child: Align(
alignment: const Alignment(-.2, -0.1), //litle left
child: Text(
"materials",
style: TextStyle(
fontSize: 18.sp,
),
),
),
),
),
SizedBox(
// Size(WIDTH,(WIDTH*0.58).toDouble())
// Size(WIDTH, (WIDTH*0.14901960784313725).toDouble()),
// Size(WIDTH,(WIDTH*0.8125).toDouble()),
height: 250.h,
width: 70.w,
child: CustomPaint(
painter: RPSCustomPainter3(),
child: Align(
alignment: const Alignment(-.2, -0.1), //litle left
child: Text(
"component",
style: TextStyle(
fontSize: 18.sp,
),
),
),
),
),
SizedBox(
// Size(WIDTH,(WIDTH*0.58).toDouble())
// Size(WIDTH, (WIDTH*0.14901960784313725).toDouble()),
// Size(WIDTH,(WIDTH*0.8125).toDouble()),
height: 250.h,
width: 70.w,
child: CustomPaint(
painter: RPSCustomPainter3(),
child: Align(
alignment: const Alignment(-.2, -0.1), //litle left
child: Text(
"component",
style: TextStyle(
fontSize: 18.sp,
),
),
),
),
),
],
),
),
);
}
}
这是我完成的示例代码，但它无法正常工作，任何人如何做到这一点请帮忙，我是新手。
最佳答案
您需要做类似的事情....将所有Container包装在Stack中，并设置每个的。Positioned容器
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: const Text('Welcome to Flutter'),
),
body: Container(
width: double.infinity,
child: Stack(
children: [
Positioned(
left: 0,
child: ClipPath(
clipper: CustomClipPathTopContainerOne(),
child: Container(
height: 50,
width: 200,
color: Colors.green,
),
),
),
Positioned(
left: 175,
child: ClipPath(
clipper: CustomClipPathTopContainerSecond(),
child: Container(
height: 50,
width: 200,
color: Colors.red,
),
),
),
Positioned(
left: 350,
child: ClipPath(
clipper: CustomClipPathTopContainerSecond(),
child: Container(
height: 50,
width: 200,
color: Colors.pink,
),
),
),
],
)
),
),
);
}
}
class CustomClipPathTopContainerOne extends CustomClipper<Path> {
@override
Path getClip(Size size) {
double w = size.width;
double h = size.height;
Paint paint = Paint()
..style = PaintingStyle.stroke
..strokeWidth=10.0
..color = Colors.black;
Path path0 = Path();
path0.moveTo(0,size.height);
path0.lineTo(0,size.height*0.4890143);
path0.lineTo(0,0);
path0.lineTo(size.width*0.8545167,0);
path0.lineTo(size.width,size.height*0.4991714);
path0.lineTo(size.width*0.8551250,size.height);
path0.lineTo(0,size.height);
path0.lineTo(size.width*0.0013417,size.height);
path0.lineTo(0,size.height);
path0.close();
return path0;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
class CustomClipPathTopContainerSecond extends CustomClipper<Path> {
@override
Path getClip(Size size) {
double w = size.width;
double h = size.height;
Paint paint = Paint()
..style = PaintingStyle.stroke
..strokeWidth=10.0
..color = Colors.black;
Path path0 = Path();
path0.moveTo(0,size.height);
path0.lineTo(size.width*0.1459833,size.height*0.5012000);
path0.lineTo(0,0);
path0.lineTo(size.width*0.8545167,0);
path0.lineTo(size.width,size.height*0.4991714);
path0.lineTo(size.width*0.8551250,size.height);
path0.lineTo(0,size.height);
path0.lineTo(size.width*0.0013417,size.height);
path0.lineTo(0,size.height);
path0.close();
return path0;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
关于flutter - 如何在 flutter 中创建类似箭头标签的设计，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73726422/