import 'package:flutter/material.dart'; import 'package:flutter/rendering.dart'; import 'package:luojigou_thinking_core/luojigou_thinking_core.dart'; class Demo1 extends StatefulWidget { const Demo1({ Key? key, }) : super(key: key); @override State createState() => _Demo1State(); } class _Demo1State extends State with SingleTickerProviderStateMixin { late TabController _controller; @override void initState() { super.initState(); _controller = TabController(length: 7, vsync: this); } bool _value = false; @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Color(0xFFC8DDFF), body: ReverseRow( children: [ PutAway( direction: PutAwayDirection.rtl, isPutAway: _value, child: SizedBox( width: 55, height: double.infinity, child: ReverseColumn( children: [ SizedBox( width: double.infinity, height: 44 + MediaQuery.of(context).padding.top, child: const Icon(Icons.arrow_back_ios), ), Expanded( child: VerticalTabBar( controller: _controller, isScrollable: true, padding: EdgeInsets.only(left: 40), labelStyle: const TextStyle( color: Color(0xFF75AAFF), fontSize: 16, height: 1, ), unselectedLabelStyle: const TextStyle( color: Color(0xFFFFFFFF), fontSize: 16, height: 1, ), labelColor: const Color(0xFF75AAFF), unselectedLabelColor: Colors.white, indicator: _TabDecoration(), tabs: [ Container( padding: EdgeInsets.symmetric(horizontal: 4), height: double.infinity, color: Colors.transparent, child: Center(child: const Text('综合区')), ), Container( padding: EdgeInsets.symmetric(horizontal: 4), height: double.infinity, color: Colors.transparent, child: Center(child: const Text('中华文化')), ), Container( padding: EdgeInsets.symmetric(horizontal: 4), height: double.infinity, color: Colors.transparent, child: Center(child: const Text('科学探索')), ), Container( padding: EdgeInsets.symmetric(horizontal: 4), height: double.infinity, color: Colors.transparent, child: Center(child: const Text('自由探索')), ), Container( padding: EdgeInsets.symmetric(horizontal: 4), height: double.infinity, color: Colors.transparent, child: Center(child: const Text('思维探索')), ), Container( padding: EdgeInsets.symmetric(horizontal: 4), height: double.infinity, color: Colors.transparent, child: Center(child: const Text('思维探索')), ), Container( padding: EdgeInsets.symmetric(horizontal: 4), height: double.infinity, color: Colors.transparent, child: Center(child: const Text('思维探索')), ), ], ), ), ], ), ), ), Expanded( child: GestureDetector( onTap: () { setState(() { _value = !_value; }); }, child: Container( decoration: const BoxDecoration( color: Colors.white, borderRadius: BorderRadius.only( topLeft: Radius.circular(20), bottomLeft: Radius.circular(20), ), boxShadow: [], ), child: Center( child: Container( height: 220, width: 220, color: Colors.red, ), ), ), ), ), ], ), ); } } class _TabDecoration extends Decoration { @override BoxPainter createBoxPainter([VoidCallback? onChanged]) { return _BoxPainter(onChanged); } } class _BoxPainter extends BoxPainter { _BoxPainter(VoidCallback? onChanged) : super(onChanged); @override void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) { if (configuration.size == null) return; final size = configuration.size!; final paint = Paint()..color = const Color(0xFF75AAFF); final dotx = offset.dx + size.width / 2; final doty = offset.dy + size.height - 8; canvas.drawCircle(Offset(dotx, doty), 2, paint); double h = 18.8; double w = 60; final path = Path(); path.moveTo(dotx - w, doty + 8); path.lineTo(dotx, doty + 8 + 20); path.lineTo(dotx + w, doty + 8); path.reset(); path.moveTo(dotx - w, doty + 8); path.cubicTo(dotx - w / 2 - 10, doty + 8, dotx - w / 2 + 10, doty + 8 + h, dotx, doty + 8 + h); path.cubicTo(dotx + w / 2 - 10, doty + 8 + h, dotx + w / 2 + 10, doty + 8, dotx + w, doty + 8); canvas.drawPath(path, paint..color = const Color(0xFFC8DDFF)); } }