主要问题是范围滑块位于容器行的顶部,它应该在“选定”部分更改颜色.
这是我现在拥有的：
用于创建图像和详细信息的代码.
class BeatLyricsPage extends StatefulWidget { final Beat beat; BeatLyricsPage(this.beat); @overrIDe _BeatLyricsPageState createState() => _BeatLyricsPageState(beat);}class _BeatLyricsPageState extends State<BeatLyricsPage> { final Beat beat; final _kPicHeight = 190.0; // used in _buildPageheading to add the beat key and beat bpm Widget _buildBeatInfoItem(String text) => DecoratedBox( decoration: Boxdecoration( border: border.all(color: Mycolor.white,wIDth: 1.0),borderRadius: borderRadius.circular(4.0),),child: padding( padding: EdgeInsets.symmetric(vertical: 3.0,horizontal: 12.0),child: Text(text,style: TextStyle(color: Mycolor.white,FontSize: 10.0,FontWeight: FontWeight.w600)),); final _kAudioControlsWIDth = 180.0; final _kAudioControlsHeight = 36.0; final _kAudioControlsMainbuttonSize = 56.0; Widget _buildAudioControls(BuildContext context) => positioned( left: (Mediaquery.of(context).size.wIDth / 2) - (_kAudioControlsWIDth / 2),top: _kPicHeight - (_kAudioControlsHeight / 2),child: Stack( overflow: Overflow.visible,children: [ Container( wIDth: _kAudioControlsWIDth,height: _kAudioControlsHeight,decoration: Boxdecoration(color: Mycolor.darkGrey,borderRadius: borderRadius.circular(100.0)),padding: EdgeInsets.symmetric(horizontal: LayoutSpacing.sm),child: Row( children: [ Cbuttonlike(beatID: beat.ID),Spacer(),GestureDetector( behavior: HitTestBehavior.opaque,child: Icon(BeatpulseIcons.cart),onTap: () => Navigator.push(context,MaterialPageRoute(builder: (_) => licenSEOptionsPage(beat))),],// ****** MAIN button (Play/Pause) ****** positioned( left: (_kAudioControlsWIDth / 2) - (_kAudioControlsMainbuttonSize / 2),top: (_kAudioControlsHeight - _kAudioControlsMainbuttonSize) / 2,child: Container( height: _kAudioControlsMainbuttonSize,wIDth: _kAudioControlsMainbuttonSize,decoration: Boxdecoration( gradIEnt: linearGradIEnt(begin: Alignment.topleft,colors: [Mycolor.primary,color(0xFFf80d0a)]),child: CbuttonPlay(),) ],); Widget _builDWaveForm() { // creates a random List of doubles,"fake data" var rng = Random(); final List waveFormData = []; for (var i = 0; i < 90; i++) { waveFormData.add(rng.nextInt(45).todouble()); } // player bloc final playerBloc = BlocProvIDer.getPlayerBloc(context); // renders return Container( height: _kPicHeight,padding: EdgeInsets.symmetric(vertical: LayoutSpacing.xxxl),child: Row( mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.end,children: [ // current playing second StreamBuilder<double>( stream: playerBloc.playingSecond,initialData: 0.0,builder: (_,playingSecondSnapshot) { // current beat playing return StreamBuilder<Beat>( stream: playerBloc.playingBeat,playingBeatSnapshot) { final playingBeat = playingBeatSnapshot.data; // if the beat playing is the same as the beat selected for the lyrics,show playing seconds if (playingBeat?.ID == beat.ID) return Text(secondsToTime(playingSecondSnapshot.data),style: MyFontStyle.sizeXxs); // otherwise show 0:00 else return Text(secondsToTime(0),style: MyFontStyle.sizeXxs); },); },SizedBox(wIDth: LayoutSpacing.xs),Row( mainAxisAlignment: MainAxisAlignment.center,children: waveFormData .map((waveFormDataIndex) => Container( height: waveFormDataIndex > 5.0 ? waveFormDataIndex : 5.0,wIDth: 2,color: Mycolor.white,margin: EdgeInsets.only(right: 1),)) .toList(),Text(secondsToTime(beat.length),style: MyFontStyle.sizeXxs),); } Widget _buildPageheading(BuildContext context,{@required String imageUrl}) => Stack( children: [ Column( children: [ Hero( tag: MyKeys.makePlayerCoverKey(beat.ID),child: Opacity( opacity: 0.3,child: Container( height: _kPicHeight,decoration: Boxdecoration( image: decorationImage(image: CachednetworkImageProvIDer(imageUrl),fit: BoxFit.cover),Container(color: Mycolor.background,height: LayoutSpacing.xl) ],padding( padding: EdgeInsets.all(LayoutSpacing.xs),child: Row( mainAxisAlignment: MainAxisAlignment.end,children: [ _buildBeatInfoItem(beat.key),SizedBox(wIDth: 4.0),_buildBeatInfoItem('${beat.bpm} BPM'),_buildAudioControls(context),_builDWaveForm(),);}解决方法 要创建自定义范围滑块,您可以使用 GestureRecognizer并将每个滑块的位置保存在 StatefulWidget内的变量中.要确定索引为i的条在范围内,您可以划分限制器的像素位置(bar1& amp) ;在下面的源中的bar2)通过条的宽度并将其与i进行比较. 可悲的是,我无法使用您的代码示例.相反,我创建了一个最基本的示例,如下所示.如果您花一点时间阅读,我相信您可以将其转移到您的应用程序.
import 'dart:math';import 'package:Flutter/material.dart';List<int> bars = [];voID main() { // generate random bars Random r = Random(); for (var i = 0; i < 50; i++) { bars.add(r.nextInt(200)); } runApp(MyApp());}class MyApp extends StatelessWidget { @overrIDe Widget build(BuildContext context) { return MaterialApp( home: Home(),); }}class Home extends StatefulWidget { @overrIDe State<StatefulWidget> createState() => HomeState();}class HomeState extends State<Home> { static const barWIDth = 5.0; double bar1position = 60.0; double bar2position = 180.0; @overrIDe Widget build(BuildContext context) { int i = 0; return Scaffold( body: Center( child: Stack( alignment: Alignment.centerleft,children: <Widget>[ Row( crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.start,children: bars.map((int height) { color color = i >= bar1position / barWIDth && i <= bar2position / barWIDth ? colors.deepPurple : colors.blueGrey; i++; return Container( color: color,height: height.todouble(),wIDth: 5.0,); }).toList(),bar( position: bar2position,callback: (DragUpdateDetails details) { setState(() { bar2position += details.delta.dx; }); },bar( position: bar1position,callback: (DragUpdateDetails details) { setState(() { bar1position += details.delta.dx; }); },); }}class bar extends StatelessWidget { final double position; final GestureDragUpdateCallback callback; bar({this.position,this.callback}); @overrIDe Widget build(BuildContext context) { return padding( padding: EdgeInsets.only(left: position >= 0.0 ? position : 0.0),child: GestureDetector( onHorizontalDragUpdate: callback,child: Container( color: colors.red,height: 200.0,); }} 总结 以上是内存溢出为你收集整理的dart – Flutter自定义范围滑块全部内容，希望文章能够帮你解决dart – Flutter自定义范围滑块所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）