flutter - 将 FloatingActionButton 分离到另一个文件

Question

我刚刚开始学习 flutter。我正在尝试一个简单的教程，它将显示两个骰子的面。当我点击 float 操作按钮时，它会随机化两个骰子上的数字。我更进一步将 FAB 分离到另一个文件中。当我尝试将 onPressed 事件从主文件传递到我的自定义 FAB 文件时，我的问题就开始了。

在我的 rollDice 方法中，我无法调用 setState，它提示无法从静态方法访问实例成员。不太确定如何从这里继续前进。

主要的飞镖

import 'package:flutter/material.dart';
import 'custom_floatBtn.dart';
import 'dart:math';

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

class MyApp extends StatelessWidget {

final swatch = const {
50: const Color(0xff661f00),
100: const Color(0xff992e00),
200: const Color(0xffcc3d00),
300: const Color(0xffe64500),
400: const Color(0xffff4d00),
500: const Color(0xffff5e1a),
600: const Color(0xffff824d),
700: const Color(0xffffa680),
800: const Color(0xffffc9b3),
900: const Color(0xffffede6)
};

@override
Widget build(BuildContext context) {
return MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: MaterialColor(0xffFF5722, swatch),
    //primarySwatch: Colors.green,
  ),
  home: MyHomePage(title: 'Dice Betting'),
);
}
}

class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);

final String title;

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

class _MyHomePageState extends State<MyHomePage> {
static int leftDiceNumber = 1;
static int rightDiceNumber = 1;

static void rollDice() {
Random num = Random();

setState(() {
  leftDiceNumber = num.nextInt(6) + 1;
  rightDiceNumber = num.nextInt(6) + 1;
});
}

static String param = 'Roll';

static final customFloatBtn = new CustomFloatBtn(
butname: param,
onPressed: rollDice,
);

@override
Widget build(BuildContext context) {
return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    backgroundColor: Colors.black38,
    body: Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Expanded(
              child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Image.asset('dice$leftDiceNumber.png'),
          )),
          Expanded(
              child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Image.asset('dice$rightDiceNumber.png'),
          )),
        ],
      ),
    ),
    floatingActionButton: customFloatBtn
    // This trailing comma makes auto-formatting nicer for build 
    methods.
    );
    }
    }

CustomFloatBtn 类

  import 'package:flutter/material.dart';

  class CustomFloatBtn extends StatelessWidget {
  final String butname;

  final GestureTapCallback onPressed;

  CustomFloatBtn({this.butname, this.onPressed});

  @override
  Widget build(BuildContext context) {
  return FloatingActionButton(
  tooltip: 'Increment',
  //child: Icon(Icons.add),
  child: Text(butname),
  onPressed: onPressed,
  );
  }
  }

Answer 1

我不确定您为什么不使用这样的简单实现。从所有地方删除 static。

floatingActionButton: CustomFloatBtn(
  butname: param,
  onPressed: rollDice,
),

---

更新:

void rollDice() { // remove static from here
  Random num = Random();

  setState(() {
    leftDiceNumber = num.nextInt(6) + 1;
    rightDiceNumber = num.nextInt(6) + 1;
  });
}

String param = 'Roll'; // remove static from here

@override
Widget build(BuildContext context) {
  return Scaffold(
    floatingActionButton: CustomFloatBtn( // use CustomFloatBtn here
      butname: param,
      onPressed: rollDice,
    ),
    ...
}