颤振,如何减少重复的小部件

时间:2019-12-02 15:03:55

标签: function flutter widget dart-2

谢谢你帮助我。

我想做的是减少以下代码的重复;

 class PeddingRadius extends StatelessWidget {
  PeddingRadius(final column);

  @override
  Widget build(BuildContext context) {
    Container(
      padding: const EdgeInsets.all(8.0),
      child: Material(
          borderRadius: BorderRadius.circular(30),
          shadowColor: Colors.grey.shade100,
          elevation: 5,
          child: //my code
     ),
    )
  }
}

有没有办法在函数或方法上方添加代码并插入下面?

                  Image.asset(
                  'asset/images/HelloWorld.png', height: 100.0, width: 100.0,
                  ),
                  Text('Hello World, form Dart'),

2 个答案:

答案 0 :(得分:1)

您可以只使用一个函数以小部件的形式返回代码

if else

然后只使用Widget myWidget(String assetLocation, String text) { return Container( padding: const EdgeInsets.all(8.0), child: Material( borderRadius: BorderRadius.circular(30), shadowColor: Colors.grey.shade100, elevation: 5, child: Column( children: [ Image.asset( assetLocation, height: 100.0, width: 100.0, ), Text(text), ], ) ), ); }

答案 1 :(得分:1)

只需将子属性添加到PeddingRadius

class PeddingRadius extends StatelessWidget {
  final Widget child;

  PeddingRadius({@required Widget child});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(8.0),
      child: Material(
          borderRadius: BorderRadius.circular(30),
          shadowColor: Colors.grey.shade100,
          elevation: 5,
          child: child,
      ),
    );
  }
}

然后给它您想要的任何孩子。

PeddingRadius(
  child: Column(
    children: [
       Image.asset(
         assetLocation, height: 100.0, width: 100.0,
       ),
       Text(text),
    ],
  ),
)
// or
PeddingRadius(
  child: RaisedButton(child: Text("Hello World")),
)

这与@dkap的答案基本相同,因为它拥有自己的小部件类,并且由于它可以接受所有类型的子项,因此具有更高的可重用性。