Flutter-仿携程首页类型切换

效果

唠叨

闲来无事，不小心下载了携程app，还幻想可以去旅游一番，奈何自己运气不好，自从高考时第一次吹空调导致自己拉肚子考试，物理，数学考了一半就交卷，英语2B铅笔除了问题，导致原来120多分变成50分，本来能上一本的我只能上个大专，家里没钱也不允许留级，只能去了最近比较火的宿迁学院，哈哈，只能自己在这里瞎写找理由了，哎，现在因为当初的运气不好导致现在专科找工作难的要死，虽然自考了本，奈何人家不要啊，不承认啊，简历只要被学习的本科前面加上自考2字压根没有面试，不加上到了最后交流水学历资料的时候又被卡死，这种情况遇到的太多太多，我现在的心情只能用一个诗来描述，那就是： 一句诗：”哎“

啥都不说了，直接上代码：

import 'package:flutter/material.dart';

import '../../widgets/xy_app_bar.dart';


class XieChengHomePage extends StatefulWidget {
  const XieChengHomePage({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return XieChengHomePageState();
  }
}

class XieChengHomePageState extends State<XieChengHomePage> with TickerProviderStateMixin {
  late TabController tabController;

  List<String> tabs = [
    "飞机票",
    "火车高铁票",
    "公交车",
  ];

  @override
  void initState() {
    super.initState();
    tabController = TabController(length: 3, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          backgroundColor: Colors.red,
          appBar: XYAppBar(
            title: "Trapezoid Indicator Example",
            onBack: () {
              Navigator.pop(context);
            },
          ),
          body: Column(
            children: [
              Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
                child: CustomTabbarWidget(
                  tabController: tabController,
                  tabs: tabs,
                ),
              ),
              Expanded(
                child: TabBarView(
                  controller: tabController,
                  children: const [
                    Center(child: Text('Tab 1 Content')),
                    Center(child: Text('Tab 2 Content')),
                    Center(child: Text('Tab 3 Content')),
                  ],
                ),
              ),
            ],
          )),
    );
  }
}

class CustomTabbarWidget extends StatefulWidget {
  final TabController tabController;
  final List<String> tabs;

  const CustomTabbarWidget({
    Key? key,
    required this.tabController,
    required this.tabs,
  }) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return CustomTabbarState();
  }
}

class CustomTabbarState extends State<CustomTabbarWidget> {
  @override
  void initState() {
    super.initState();
    widget.tabController.addListener(() {
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, constraints) {
      var tabWidth = constraints.maxWidth / widget.tabs.length;
      var currentWidth = tabWidth * 1.5;
      var offset =
          (constraints.maxWidth - currentWidth) / (widget.tabs.length - 1);
      return Container(
        width: constraints.maxWidth,
        child: Stack(
          children: [
            SizedBox(
              width: constraints.maxWidth,
              height: 60,
            ),
            Positioned(
              bottom: 0,
              left: 0,
              right: 0,
              child: Container(
                height: 50,
                decoration: BoxDecoration(
                  color: Colors.white.withAlpha(80),
                  borderRadius: const BorderRadius.only(
                    topLeft: Radius.circular(8),
                    topRight: Radius.circular(8),
                  ),
                ),
                child: Row(
                  children: widget.tabs.asMap().keys.map((index) {
                    return AnimatedContainer(
                      duration: const Duration(milliseconds: 200),
                      width: index == widget.tabController.index
                          ? currentWidth
                          : offset,
                      child: InkWell(
                        key: ObjectKey(index),
                        onTap: () {
                          widget.tabController.animateTo(index);
                          setState(() {});
                        },
                        child: Container(
                          alignment: Alignment.center,
                          child: Text(
                            widget.tabs[index],
                            style: const TextStyle(fontSize: 14),
                          ),
                        ),
                      ),
                    );
                  }).toList(),
                ),
              ),
            ),
            AnimatedPositioned(
              duration: const Duration(milliseconds: 300),
              left: widget.tabController.index * offset,
              bottom: 0,
              child: IgnorePointer(
                child: ClipPath(
                  clipper:
                      TrapezoidClipper(tabController: widget.tabController),
                  child: Container(
                      height: 60,
                      alignment: Alignment.center,
                      width: currentWidth,
                      decoration: const BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(8),
                            topRight: Radius.circular(8)),
                      ),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Expanded(
                            child: Center(
                              child: Text(
                                widget.tabs[widget.tabController.index],
                                style: const TextStyle(
                                    fontSize: 18, color: Colors.blue),
                              ),
                            ),
                          ),
                          TextUnderline(
                              text: widget.tabs[widget.tabController.index],
                              style: const TextStyle(
                                  fontSize: 18, color: Colors.blue),
                              lineColor: Colors.blue,
                              height: 4),
                        ],
                      )),
                ),
              ),
            ),
          ],
        ),
      );
    });
  }
}

class TrapezoidClipper extends CustomClipper<Path> {
  TrapezoidClipper({required this.tabController});

  TabController tabController;

  @override
  Path getClip(Size size) {
    var isLeft = tabController.index == 0;
    var isRight = tabController.index == tabController.length - 1;
    double inset = size.width * 0.1;
    double radius = 8.0;
    // path.moveTo(isLeft ? 0 : inset, 0);
    // path.lineTo(isRight ? size.width : size.width - inset, 0);
    // path.lineTo(size.width, size.height);
    // path.lineTo(0, size.height);

    final path = Path()
      ..moveTo(radius, 0) // 移动到起始点
      ..lineTo(size.width - radius, 0) // 顶边线
      ..quadraticBezierTo(size.width, 0, size.width, radius) // 右上角圆角
      ..lineTo(size.width, size.height - radius) // 右边线
      ..quadraticBezierTo(
          size.width, size.height, size.width - radius, size.height) // 右下角圆角
      ..lineTo(radius, size.height) // 底边线
      ..quadraticBezierTo(0, size.height, 0, size.height - radius) // 左下角圆角
      ..lineTo(0, radius) // 左边线
      ..quadraticBezierTo(0, 0, radius, 0); // 左上角圆角

    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}

class TextUnderline extends StatelessWidget {
  const TextUnderline({
    Key? key,
    required this.text,
    required this.style,
    required this.lineColor,
    required this.height,
  }) : super(key: key);
  final String text;
  final TextStyle style;
  final Color lineColor;
  final double height;

  @override
  Widget build(BuildContext context) {
    final textPainter = TextPainter(
      text: TextSpan(
        text: text,
        style: style,
      ),
      textDirection: TextDirection.ltr,
    );
    textPainter.layout();
    var textWidth = textPainter.width;
    return Container(
      width: textWidth,
      height: height,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(
          Radius.circular(height),
        ),
        color: lineColor,
      ),
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266

github.com/yixiaolunhui/flutter_xy