Flutter重用自定义小部件

Sam324 发表于常见问题

山姆324

假设我创建了一个模拟按钮功能的自定义小部件。

  @override
  Widget build(BuildContext context) {
    return RawMaterialButton(
      onPressed: () {},
      elevation: 2.0,
      fillColor: Colors.lightGreenAccent,
      child: SizedBox (
        width: 90 ,
        height: 90,
        child: Column (
          children: [
            Icon(Icons.face,
            size: 50,
            color: Colors.red,),
            Text('Enable ->'),
            Container(
              height: 20,
              width: 80,
              decoration: new BoxDecoration(
                color: Colors.red,
                borderRadius: new BorderRadius.all(Radius.elliptical(45, 10)),
              ),
            ),
          ],
        ),
      ),
      padding: EdgeInsets.all(15.0),
      shape: CircleBorder(),
    );
  }

如何创建一组此类小部件，但通过重用我的小部件使每个小部件具有不同的图标或文本？

阿基夫

您可以像这样自定义窗口小部件：

import 'package:flutter/material.dart';

class CustomWidget extends StatelessWidget {
CustomWidget({this.icon, this.text});
final Widget icon;
final Widget text;

@override
Widget build(BuildContext context) {
 return RawMaterialButton(
  onPressed: () {},
  elevation: 2.0,
  fillColor: Colors.lightGreenAccent,
  child: SizedBox (
    width: 90 ,
    height: 90,
    child: Column (
      children: [
        icon,
        text,
        Container(
          height: 20,
          width: 80,
          decoration: new BoxDecoration(
            color: Colors.red,
            borderRadius: new BorderRadius.all(Radius.elliptical(45, 10)),
          ),
        ),
      ],
    ),
  ),
  padding: EdgeInsets.all(15.0),
  shape: CircleBorder(),
  );

 }
}