Question

我为篮球制作了这个记分员应用程序。我需要计算分数并将其显示在应用程序上。但它卡在 0 上。它可能与 setState() 有关。

如果可能的话，不要过多地更改代码，因为我需要向我的老师展示和解释这一点。

输入页面：

class InputPage extends StatefulWidget {
  @override
  _InputPageState createState() => _InputPageState();
}

class _InputPageState extends State<InputPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('basketball counter'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: Row(children: <Widget>[Expanded(child: HoopDesign()), Text(Counter.counter.toString())] ),
          ),
          Expanded(
              child: Row(
            children: <Widget>[
              Expanded(
                child: CardDesign1(),
              ),
              Expanded(
                child: CardDesign3(),
              ),
              Expanded(
                child: CardDesign2(),
              ),
            ],
          )),
          Expanded(
            child: Row(
              children: <Widget>[
                Expanded(
                  child: CardDesign6(),
                ),
                Expanded(
                  child: CardDesign4(),
                ),
                Expanded(
                  child: CardDesign5(),
                ),
              ],
            ),
          ),
          Expanded(
            child: Row(
              children: <Widget>[
                Expanded(
                  child: HoopDesign(),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

容器：

import 'package:flutter/material.dart';
import 'input_page.dart';

//#region Team1 cards
class CardDesign3 extends StatefulWidget {
@override
CardDesign3State createState() => CardDesign3State();
}
class CardDesign3State extends State<CardDesign3> {
@override
Widget build(BuildContext context) {
  return InkWell(
      onTap: () {
        
      },
      child: Container(
        margin: EdgeInsets.all(15),
        decoration: BoxDecoration(
          color: Color(0xFFEF7F4D),
          borderRadius: BorderRadius.circular(10),
        ),
        child: Text(
          'Vanaf de 3 punter lijn!',
          textAlign: TextAlign.center,
          style: TextStyle(
            fontFamily: 'Bullpen3D',
            fontSize: 20,
          ),
        ),
        height: 100,
        width: 100,
      ));
}
}

class CardDesign2 extends StatefulWidget {
@override
_CardDesign2State createState() => _CardDesign2State();
}

class _CardDesign2State extends State<CardDesign2> {
@override
Widget build(BuildContext context) {
  return InkWell(
      onTap: () {
        setState(() => Counter.counter += 2);
      },
      child: Container(
        margin: EdgeInsets.all(15),
        decoration: BoxDecoration(
          color: Color(0xFFEF7F4D),
          borderRadius: BorderRadius.circular(10),
        ),
        child: Text(
          'Vanaf de 2 punter lijn',
          textAlign: TextAlign.center,
          style: TextStyle(
            fontFamily: 'Bullpen3D',
            fontSize: 20,
          ),
        ),
        height: 100,
        width: 100,
      ));
}
}

class CardDesign1 extends StatefulWidget {

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

class _CardDesign1State extends State<CardDesign1> {

@override
Widget build(BuildContext context) {
  return InkWell(
      onTap: () {
        setState(() => Counter.counter++);
      },
      child: Container(
        margin: EdgeInsets.all(15),
        decoration: BoxDecoration(
          color: Color(0xFFEF7F4D),
          borderRadius: BorderRadius.circular(10),
        ),
        child: Text(
          'Vanaf de 1 punter lijn',
          textAlign: TextAlign.center,
          style: TextStyle(
            fontFamily: 'Bullpen3D',
            fontSize: 20,
          ),
        ),
        height: 100,
        width: 100,
      ));
}
}
//#endregion

//#region Team2 cards
class CardDesign4 extends StatefulWidget {
@override
CardDesign4State createState() => CardDesign4State();
}
class CardDesign4State extends State<CardDesign4> {
@override
Widget build(BuildContext context) {
  return InkWell(
      onTap: () {
        setState(() {
          Counter2.counter += 3 ;
        }
        );
      },
      child: Container(
        margin: EdgeInsets.all(15),
        decoration: BoxDecoration(
          color: Color(0xFFEF7F4D),
          borderRadius: BorderRadius.circular(10),
        ),
        child: Text(
          'Vanaf de 3 punter lijn!',
          textAlign: TextAlign.center,
          style: TextStyle(
            fontFamily: 'Bullpen3D',
            fontSize: 20,
          ),
        ),
        height: 100,
        width: 100,
      ));
}
}

class CardDesign5 extends StatefulWidget {
@override
_CardDesign5State createState() => _CardDesign5State();
}

class _CardDesign5State extends State<CardDesign5> {
@override
Widget build(BuildContext context) {
  return InkWell(
      onTap: () {
        setState(() {
          Counter2.counter += 2;
        });
      },
      child: Container(
        margin: EdgeInsets.all(15),
        decoration: BoxDecoration(
          color: Color(0xFFEF7F4D),
          borderRadius: BorderRadius.circular(10),
        ),
        child: Text(
          'Vanaf de 2 punter lijn',
          textAlign: TextAlign.center,
          style: TextStyle(
            fontFamily: 'Bullpen3D',
            fontSize: 20,
          ),
        ),
        height: 100,
        width: 100,
      ));
}
}

class CardDesign6 extends StatefulWidget {

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

class _CardDesign6State extends State<CardDesign6> {

@override
Widget build(BuildContext context) {
  return InkWell(
      onTap: () {
        setState(() {
          Counter2.counter++;
        });
      },
      child: Container(
        margin: EdgeInsets.all(15),
        decoration: BoxDecoration(
          color: Color(0xFFEF7F4D),
          borderRadius: BorderRadius.circular(10),
        ),
        child: Text(
          'Vanaf de 1 punter lijn',
          textAlign: TextAlign.center,
          style: TextStyle(
            fontFamily: 'Bullpen3D',
            fontSize: 20,
          ),
        ),
        height: 100,
        width: 100,
      ));
}
}
//#endregion
class HoopDesign extends StatelessWidget {

@override
Widget build(BuildContext context) {
  return Container(
    height: 100.0,
    width: 100.0,
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage('images/basketballhoop.jpg'),
      ),
      shape: BoxShape.circle,
    ),
  );
}
}


//#region Counters integers
class Counter {
static int counter = 0;
}

class Counter2 {
static int counter = 0;
}
//#endregion

主要内容：

import 'package:flutter/material.dart';
import 'input_page.dart';

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

class BasketballCounter extends StatelessWidget {
@override
Widget build(BuildContext context) {
  return MaterialApp(
    theme: ThemeData(
      primaryColor: Color(0xFFEE682D),
      scaffoldBackgroundColor: Color(0xFFEE682D),
    ),
    home: InputPage(),
  );
}
}

应用程序的外观：（见顶箍侧面的0） https://i.imgur.com/JwLnVaU.png

感谢您的帮助:)

Answer 1

您需要重新渲染 InputPage 以获得 counter 的新值。

示例：（我重构了代码，参考HalfCourt小部件）

class InputPage extends StatelessWidget {
  const InputPage({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('basketball counter'),
      ),
      body: Column(
        children: <Widget>[
          const Expanded(child: HalfCourt()),
          const Expanded(child: HalfCourt(isUpperSide: false)),
        ],
      ),
    );
  }
}

class HalfCourt extends StatefulWidget {
  const HalfCourt({
    this.isUpperSide = true,
    Key? key,
  }) : super(key: key);

  final bool isUpperSide;

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

class _HalfCourtState extends State<HalfCourt> {
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    final Widget hoopAndScore = Expanded(
      child: Row(
        children: <Widget>[
          const Expanded(child: HoopDesign()),
          Text(counter.toString())
        ],
      ),
    );

    return Column(
      children: <Widget>[
        if (widget.isUpperSide) hoopAndScore,
        Row(
          children: <Widget>[
            Expanded(
              child: CardDesign(
                onPressed: () => setState(() => counter++),
                text: 'Vanaf de 1 punter lijn',
              ),
            ),
            Expanded(
              child: CardDesign(
                onPressed: () => setState(() => counter += 3),
                text: 'Vanaf de 3 punter lijn!',
              ),
            ),
            Expanded(
              child: CardDesign(
                onPressed: () => setState(() => counter += 2),
                text: 'Vanaf de 2 punter lijn',
              ),
            ),
          ],
        ),
        if (!widget.isUpperSide) hoopAndScore
      ],
    );
  }
}

class CardDesign extends StatelessWidget {
  CardDesign({
    required this.onPressed,
    required this.text,
    Key? key,
  }) : super(key: key);

  final VoidCallback onPressed;
  final String text;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onPressed,
      child: Container(
        height: 100,
        width: 100,
        margin: const EdgeInsets.all(15),
        decoration: const BoxDecoration(
          color: Color(0xFFEF7F4D),
          borderRadius: BorderRadius.all(Radius.circular(10)),
        ),
        child: Text(
          text,
          textAlign: TextAlign.center,
          style: const TextStyle(
            fontFamily: 'Bullpen3D',
            fontSize: 20,
          ),
        ),
      ),
    );
  }
}

class HoopDesign extends StatelessWidget {
  const HoopDesign({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100.0,
      width: 100.0,
      color: Colors.orange,
    );
  }
}

颤振计数器不计数

1 个答案: