InWell在多个小部件上的实现

时间:2020-03-02 08:12:38

标签: flutter

下面的颤动代码表示MealsListView对象的列表,该列表表示向用户显示的一系列按钮,我要做的是添加一个onPressed方法,当用户单击特定的按钮时,按钮,将按钮标题传递给 _marcaturautente(titlename)函数。我该怎么做呢?

扑镖代码:

//Funzione che viene eseguita quando l'utente clicca su un pulsante per effettuare la marcatura
Future<void> _marcaturautente(String tipologiaMarcatura) async {
  print("Sono dentro la funzione che esegue la marcatura");
  //Instanzio l'oggetto che si occupa di recuperare i dati per la marcatura
  var location = new Location();
  //Recupero i valori per istanziare l'oggetto dell'utente
  var email = await Storage.leggi("Email");
  var password = await Storage.leggi("Password");
  var idutente = int.parse(await Storage.leggi("IdUtente"));
  location.onLocationChanged().listen((LocationData currentLocation) {
    double longitudine = currentLocation.longitude;
    double latitudine = currentLocation.latitude;
    //Genero l'istanza dell'utente
    var user = new Utente.init(idutente, email, password);
    //Genero l'istanza che si occuperà di effettuare la marcatura
    var marcatura = new Marcatura(user, longitudine, latitudine);
    //Verifico la tipologia della marcatura
    if (tipologiaMarcatura == "Ingresso") {
      marcatura.ingresso();
    } else if (tipologiaMarcatura == "Uscita") {
      marcatura.uscita();
    } else if (tipologiaMarcatura == "Arrivo") {
      marcatura.arrivo();
    } else if (tipologiaMarcatura == "Partenza") {
      marcatura.partenza();
    }
  });
}

class MealsListView extends StatefulWidget {
  const MealsListView(
      {Key key, this.mainScreenAnimationController, this.mainScreenAnimation})
      : super(key: key);

  final AnimationController mainScreenAnimationController;
  final Animation<dynamic> mainScreenAnimation;

  @override
  _MealsListViewState createState() => _MealsListViewState();
}

class _MealsListViewState extends State<MealsListView>
    with TickerProviderStateMixin {
  AnimationController animationController;
  List<MealsListData> mealsListData = MealsListData.tabIconsList;

  @override
  void initState() {
    animationController = AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this);
    super.initState();
  }

  Future<bool> getData() async {
    await Future<dynamic>.delayed(const Duration(milliseconds: 50));
    return true;
  }

  @override
  void dispose() {
    animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: widget.mainScreenAnimationController,
      builder: (BuildContext context, Widget child) {
        return FadeTransition(
          opacity: widget.mainScreenAnimation,
          child: Transform(
            transform: Matrix4.translationValues(
                0.0, 30 * (1.0 - widget.mainScreenAnimation.value), 0.0),
            child: Container(
              height: 216,
              width: double.infinity,
              child: ListView.builder(
                padding: const EdgeInsets.only(
                    top: 0, bottom: 0, right: 16, left: 16),
                itemCount: mealsListData.length,
                scrollDirection: Axis.horizontal,
                itemBuilder: (BuildContext context, int index) {
                  final int count =
                      mealsListData.length > 10 ? 10 : mealsListData.length;
                  final Animation<double> animation =
                      Tween<double>(begin: 0.0, end: 1.0).animate(
                          CurvedAnimation(
                              parent: animationController,
                              curve: Interval((1 / count) * index, 1.0,
                                  curve: Curves.fastOutSlowIn)));
                  animationController.forward();

                  return MealsView(
                      onTap: (index) {},
                      mealsListData: mealsListData[index],
                      animation: animation,
                      animationController: animationController,
                      tipologiaMarcatura: mealsListData[index].titleTxt);
                },
              ),
            ),
          ),
        );
      },
    );
  }
}

typedef CustomCallback = void Function(int);

class MealsView extends StatelessWidget {
  const MealsView(
      {Key key,
      this.mealsListData,
      this.animationController,
      this.animation,
      this.index,
      this.onTap,
      this.tipologiaMarcatura})
      : super(key: key);

  //Stringa che viene inizializzata con la tipologia della marcatura
  final String tipologiaMarcatura;
  final MealsListData mealsListData;
  final AnimationController animationController;
  final Animation<dynamic> animation;
  final int index;
  final CustomCallback onTap;

  //Recupero dei dati che vanno inseriti all'interno dell widget
  Widget getData() {
    return FadeTransition(
      opacity: animation,
      //wrap your Stack widget inside InkWell

      child: Transform(
        transform:
            Matrix4.translationValues(100 * (1.0 - animation.value), 0.0, 0.0),
        child: SizedBox(
          width: 130,
          child: Stack(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(
                    top: 32, left: 8, right: 8, bottom: 16),
                child: Container(
                  decoration: BoxDecoration(
                    boxShadow: <BoxShadow>[
                      BoxShadow(
                          color:
                              HexColor(mealsListData.endColor).withOpacity(0.6),
                          offset: const Offset(1.1, 4.0),
                          blurRadius: 8.0),
                    ],
                    gradient: LinearGradient(
                      colors: <HexColor>[
                        HexColor(mealsListData.startColor),
                        HexColor(mealsListData.endColor),
                      ],
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                    ),
                    borderRadius: const BorderRadius.only(
                      bottomRight: Radius.circular(8.0),
                      bottomLeft: Radius.circular(8.0),
                      topLeft: Radius.circular(8.0),
                      topRight: Radius.circular(54.0),
                    ),
                  ),
                  child: Padding(
                    padding: const EdgeInsets.only(
                        top: 54, left: 16, right: 16, bottom: 8),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(
                          mealsListData.titleTxt,
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontFamily: TemaApp.fontName,
                            fontWeight: FontWeight.bold,
                            fontSize: 16,
                            letterSpacing: 0.2,
                            color: TemaApp.white,
                          ),
                        ),
                        Expanded(
                          child: Padding(
                            padding: const EdgeInsets.only(top: 8, bottom: 8),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.start,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                Text(
                                  mealsListData.meals.join('\n'),
                                  style: TextStyle(
                                    fontFamily: TemaApp.fontName,
                                    fontWeight: FontWeight.w500,
                                    fontSize: 10,
                                    letterSpacing: 0.2,
                                    color: TemaApp.white,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                        mealsListData.kacl != 0
                            ? Row(
                                mainAxisAlignment: MainAxisAlignment.start,
                                crossAxisAlignment: CrossAxisAlignment.end,
                                children: <Widget>[
                                  Text(
                                    mealsListData.kacl.toString(),
                                    textAlign: TextAlign.center,
                                    style: TextStyle(
                                      fontFamily: TemaApp.fontName,
                                      fontWeight: FontWeight.w500,
                                      fontSize: 24,
                                      letterSpacing: 0.2,
                                      color: TemaApp.white,
                                    ),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.only(
                                        left: 4, bottom: 3),
                                    child: Text(
                                      '',
                                      style: TextStyle(
                                        fontFamily: TemaApp.fontName,
                                        fontWeight: FontWeight.w500,
                                        fontSize: 10,
                                        letterSpacing: 0.2,
                                        color: TemaApp.white,
                                      ),
                                    ),
                                  ),
                                ],
                              )
                            : Container(
                                decoration: BoxDecoration(
                                  color: TemaApp.nearlyWhite,
                                  shape: BoxShape.circle,
                                  boxShadow: <BoxShadow>[
                                    BoxShadow(
                                        color: TemaApp.nearlyBlack
                                            .withOpacity(0.4),
                                        offset: Offset(8.0, 8.0),
                                        blurRadius: 8.0),
                                  ],
                                ),
                                child: Padding(
                                  padding: const EdgeInsets.all(6.0),
                                  child: Icon(
                                    Icons.add,
                                    color: HexColor(mealsListData.endColor),
                                    size: 24,
                                  ),
                                ),
                              ),
                      ],
                    ),
                  ),
                ),
              ),
              Positioned(
                top: 0,
                left: 0,
                child: Container(
                  width: 84,
                  height: 84,
                  decoration: BoxDecoration(
                    color: TemaApp.nearlyWhite.withOpacity(0.2),
                    shape: BoxShape.circle,
                  ),
                ),
              ),
              Positioned(
                top: 0,
                left: 8,
                child: SizedBox(
                  width: 80,
                  height: 80,
                  child: Image.asset(mealsListData.imagePath),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
        animation: animationController,
        builder: (BuildContext context, Widget child) {
          //InWell è un rettangolo che permett edi rispondere al touch
          return InkWell(
            onTap: () {
              onTap(index);
              print("Eseguito tap su index: " + index.toString() + "");
            },
            //Viene generato il child con il container dei dati
            child: Container(
              child: getData(),
            ),
          );
        });
  }
}

1 个答案:

答案 0 :(得分:1)

更新*

typedef CustomCallback = void Function(int);
//Custom Callback function

class MealsView extends StatelessWidget {
      const MealsView(
          {Key key,
          this.mealsListData,
          this.animationController,
          this.animation,
          this.index,
          this.onTap;
          this.tipologiaMarcatura})
          : super(key: key);

      //Stringa che viene inizializzata con la tipologia della marcatura
      final String tipologiaMarcatura;
      final MealsListData mealsListData;
      final AnimationController animationController;
      final Animation<dynamic> animation;
      final int index;
      final CustomCallback onTap;

      //wrap your Stack widget inside InkWell
      InkWell(
      onTap:(){
        onTap(index);
        //Todo
       },
       //Your Stack and other code goes here...
      )

}

并在

中使用
return MealsView(onTap:(ii){

      },
      mealsListData: mealsListData[index],
      animation: animation,
      animationController: animationController,
      tipologiaMarcatura: mealsListData[index].titleTxt
);