dart – Flutter自定义范围滑块

发布时间：2020-12-14 14:56:05 所属栏目：百科来源：网络整理

导读：我正在尝试在容器行上创建一个范围滑块,它应该创建一个音频波形,但我不知道从哪里开始… 主要问题是范围滑块位于容器行的顶部,它应该在“选定”部分更改颜色. 这是我现在拥有的：用于创建图像和详细信息的代码. class BeatLyricsPage extends StatefulWidge

我正在尝试在容器行上创建一个范围滑块,它应该创建一个音频波形,但我不知道从哪里开始…

主要问题是范围滑块位于容器行的顶部,它应该在“选定”部分更改颜色.

enter image description here

这是我现在拥有的：

enter image description here

用于创建图像和详细信息的代码.

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进行比较.

可悲的是,我无法使用您的代码示例.相反,我创建了一个最基本的示例,如下所示.如果您花一点时间阅读,我相信您可以将其转移到您的应用程序.

Custom Range Slider

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,);
  }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!