在 Flutter 中创建自定义小部件

Question

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

int _weight =60;

class RoundIconData extends StatefulWidget {

@override
_RoundIconDataState createState() => _RoundIconDataState();
}
class _RoundIconDataState extends State<RoundIconData> {

RoundIconData({@required this.icon,@required this.pressme});
final IconData icon;
final int pressme;

@override
Widget build(BuildContext context) {
 return RawMaterialButton(
   child: Icon(icon),
   onPressed: (){
    setState(() {
      if(icon == FontAwesomeIcons.minus){
        _weight--;
      }
      else{
        _weight++
      }
    });
  },
  elevation: 6.0,
  constraints: BoxConstraints.tightFor(
    width: 56.0,
    height: 56.0,
  ),
  shape: CircleBorder(),
  fillColor: Color(0xFF4C4F5E),
);
}
}

我在创建这个时出错。

我想要的是

带有 RawmaterialButton 的自定义小部件，我可以通过它添加图标。如果我添加 icon.minus 那么我给定的私有权重要减少，否则给定私有权重要增加

Answer 1

您可以复制粘贴运行下面的完整代码
您必须将以下代码移动到RoundIconData

RoundIconData({@required this.icon,@required this.pressme});
final IconData icon;
final int pressme;

并传递刷新回调

工作演示

完整代码

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

int weight = 60;

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  refresh() {
    setState(() {});
  }

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RoundIconData(
              icon: Icon(FontAwesomeIcons.minus),
              notifyParent: refresh,
            ),
            RoundIconData(
              icon: Icon(Icons.add),
              notifyParent: refresh,
            ),
            Text(
              '${weight}',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

class RoundIconData extends StatefulWidget {
  final Icon icon;
  final int pressme;
  final Function() notifyParent;

  RoundIconData(
      {@required this.icon,
      @required this.pressme,
      @required this.notifyParent});
  @override
  _RoundIconDataState createState() => _RoundIconDataState();
}

class _RoundIconDataState extends State<RoundIconData> {
  @override
  Widget build(BuildContext context) {
    return RawMaterialButton(
      child: widget.icon,
      onPressed: () {
        print(widget.icon.toString());
        print(Icon(FontAwesomeIcons.minus).toString());
        if (widget.icon.toString() == Icon(FontAwesomeIcons.minus).toString()) {
          weight--;
          widget.notifyParent();
          print(weight);
        } else {
          weight++;
          widget.notifyParent();
          print(weight);
        }
      },
      elevation: 6.0,
      constraints: BoxConstraints.tightFor(
        width: 56.0,
        height: 56.0,
      ),
      shape: CircleBorder(),
      fillColor: Color(0xFF4C4F5E),
    );
  }
}