在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),
    );
  }
}

Answer 2

通过组合较小的小部件（而不是扩展它们）来构建自定义小部件。这有点类似于在Android中实现自定义ViewGroup的情况，在Android中，所有构件都已存在，但是您提供了不同的行为，例如，自定义布局逻辑。

构建一个在构造函数中带有标签的CustomButton？创建一个用标签组成CustomButton的{​​{1}}，而不是扩展ElevatedButton：

ElevatedButton

然后使用class CustomButton extends StatelessWidget { final String label; CustomButton(this.label); @override Widget build(BuildContext context) { return ElevatedButton(onPressed: () {}, child: Text(label)); } } ，就像使用其他Flutter小部件一样：

CustomButton