/ /... SizedBox(height: 15), buildLineSegmentControl(null, lineColor: Colors.blue), SizedBox(height: 15), buildLineSegmentControl(Colors.white, lineColor: Colors.blue), SizedBox(height: 15), buildLineSegmentControl(Colors.black87, lineColor: Colors.white), //...Copy the code
Widget buildLineSegmentControl(Color? backgroundColor, {required Color lineColor}) { final Map<int, Widget> children = const <int, Widget>{ 0: Text("Item 111", style: TextStyle(fontSize: 15), textAlign: TextAlign.center,), 1: Text("Item 222", style: TextStyle(fontSize: 15), textAlign: TextAlign.center,), 2: Text("Item 333", style: TextStyle(fontSize: 15), textAlign: TextAlign.center,), }; if (backgroundColor ! = null) { return LineSegmentControl( groupValue: groupValue, children: children, backgroundColor: backgroundColor, lineColor: lineColor, onValueChanged: (i){ setState(() { groupValue = int.parse("$i"); }); DDLog(groupValue); }); } return LineSegmentControl( groupValue: groupValue, children: children, // backgroundColor: backgroundColor, lineColor: lineColor, onValueChanged: (i){ setState(() { groupValue = int.parse("$i"); }); DDLog(groupValue); }); }Copy the code
// // linesegmentWidget. dart // Fluttertemplet // // Created by shang on 6/14/21 8:47am. // Copyright © 6/14/21 shang. All rights reserved. // import 'dart:ui'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; import 'package:fluttertemplet/dartExpand/DDLog.dart'; Class LineSegmentControl<T> extends StatefulWidget {final Map<T, Widget> children; T? groupValue; final EdgeInsetsGeometry padding; final EdgeInsetsGeometry margin; final LineSegmentStyle style; final Color? backgroundColor; final Color lineColor; final double height; final Radius radius; void Function(T value) onValueChanged; LineSegmentControl({ Key? key, required this.children, required this.groupValue, this.style = LineSegmentStyle.bottom, this.backgroundColor = CupertinoColors.tertiarySystemFill, this.lineColor = Colors.blue, this.height = 36, this.padding = const EdgeInsets.symmetric(horizontal: 0), this.margin = const EdgeInsets.symmetric(horizontal: 15), this.radius = const Radius.circular(4), required this.onValueChanged, }) : super(key: key); @override _LineSegmentControlState createState() => _LineSegmentControlState(); } class _LineSegmentControlState extends State<LineSegmentControl> { @override Widget build(BuildContext context) { double screenWidth = MediaQuery.of(context).size.width; double contentWidth = screenWidth - widget.margin.horizontal - widget.padding.horizontal; double itemWidth = contentWidth / widget.children.values.length; return Container( margin: widget.margin, padding: widget.padding, decoration: BoxDecoration( color: widget.backgroundColor, borderRadius: BorderRadius.all(widget.radius), ), child: Stack( children: [ Row( children: widget.children.values.map((e) => Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisSize: MainAxisSize.min, children: <Widget>[ Container( height: widget.height, width: itemWidth, child: TextButton( child: e, onPressed: (){ DDLog(e); setState(() { widget.groupValue = widget.children.values.toList().indexOf(e); }); widget.onValueChanged(widget.groupValue); }, ), ), ], ), ).toList(), ), AnimatedPositioned( duration: Duration(milliseconds: 200), top: widget.style == LineSegmentStyle.top ? 0 : widget.height - 2, left: widget.groupValue*itemWidth, child: Container( height: 2, width: itemWidth, color: widget.lineColor, // decoration: BoxDecoration( // borderRadius: BorderRadius.circular(4), // color: widget.lineColor, // ), ), ), ], ), ); }}Copy the code

LineSegmentControl.dart