flutter - 如何在颤动中按下按钮时更改价格

Question

设想

我有一个虚拟图像，图像下方有价格，价格下方有三个小部件 两个小部件是按钮 (+) 和 (-)，一个小部件是 Text('1')，它是一个数量。

问题

当我单击按钮时，它会增加和减少数字，但我如何根据数量更改价格（如果数量为 2，则价格必须翻倍）

    class Quantities extends StatefulWidget {
      final productprice;
      final productimage;
      Quantities({this.productprice, this.productimage});
      @override
      _QuantitiesState createState() => _QuantitiesState(productprice,productimage);
    }
    class _QuantitiesState extends State<Quantities> {
      int counter = 1;
  final productprice;
  final productimage;
  _QuantitiesState(this.productprice, this.productimage);
      void increment() {
        setState(() {
          counter++;
        });
      }
      void decrement() {
        setState(() {
          counter--;
        });
      }
      @override
      Widget build(BuildContext context) {
        return PlatformScaffold(
          appBar: PlatformAppBar(
            backgroundColor: Colors.lightBlue[900],
            title: Text('Quantities'),
          ),
          body: Padding(
            padding: const EdgeInsets.only(top: 10.0),
            child: ListView(
              children: <Widget>[
                new Container(
                  height: 200.0,
                  child: GridTile(
                    child: Container(
                      color: Colors.white,
                      child: Image.asset(productimage),),),),
                Center(
                  child: Text(
                    productprice,),),
                Padding(
                  padding: const EdgeInsets.only(top: 10.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.only(right: 10.0),
                        child: PlatformButton(
                            onPressed: () {
                              decrement();
                              if (counter < 1) {
                                counter = 1;
                              }
                            },
                            child: Text(
                              '-',
                            ),
                            androidFlat: (_) =>
                                MaterialFlatButtonData(color: Colors.cyan),
                            ios: (_) => CupertinoButtonData(
                                color: Colors.cyan
                            )),
                      ),
                      Text(
                        '$counter',
                      ),
                      Padding(
                        padding: const EdgeInsets.only(left: 10.0),
                        child: PlatformButton(
                            onPressed: () {
                              increment();
                            },
                            child: Text(
                              '+',
                              style: TextStyle(color: Colors.white, fontSize: 30.0),
                            ),
                            androidFlat: (_) =>
                                MaterialFlatButtonData(color: Colors.cyan),
                            ios: (_) => CupertinoButtonData(
                                color: Colors.cyan
                            )),

标签： flutterdart

Answer 1

这是完整的代码示例：

import 'package:flutter/material.dart';
import 'package:project_app/proyects/home.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Product price',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Quantities(productimage: "",productprice: "20$",),
    );
  }
}

class Quantities extends StatefulWidget {
  final productprice;
  final productimage;
  Quantities({this.productprice, this.productimage});
  @override
  _QuantitiesState createState() =>
      _QuantitiesState(productprice, productimage);
}

class _QuantitiesState extends State<Quantities> {
  int counter = 1;
  final productprice;
  double finalprice;
  final productimage;
  final productp =productprice.replaceAll(new RegExp(r'\$'), '');
  _QuantitiesState(this.productprice, this.productimage);
  void increment() {
    setState(() {
      counter++;
      finalprice=double.parse(productp)*counter;
    });
  }

  void decrement() {
    setState(() {
      counter--;
      finalprice=double.parse(productp)*counter;
    });
  }

  @override
  void initState() {
    super.initState();

    finalprice= double.parse(productp);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.lightBlue[900],
          title: Text('Quantities'),
        ),
        body: Padding(
          padding: const EdgeInsets.only(top: 10.0),
          child: ListView(
            children: <Widget>[
              Center(
                child: Text(
                  finalprice.toString(),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 10.0),
                child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.only(right: 10.0),
                        child: FlatButton(
                          onPressed: () {
                            if (counter > 1) {
                              decrement();
                            }
                          },
                          child: Text(
                            '-',
                          ),
                        ),
                      ),
                      Text(
                        '$counter',
                      ),
                      Padding(
                        padding: const EdgeInsets.only(left: 10.0),
                        child: FlatButton(
                          onPressed: () {
                            increment();
                          },
                          child: Text(
                            '+',
                            style:
                                TextStyle(color: Colors.white, fontSize: 30.0),
                          ),
                        ),
                      ),
                    ]),
              ),
            ],
          ),
        ));
  }
}