Clever Geek Handbook

扑。使用Dart扩展程序简化小部件布局

图片



在Dart 2.7中，我们引入了扩展，这些扩展允许开发人员向现有类型添加新功能。扩展不仅可以在编写业务逻辑时提供帮助，而且在执行其他任务时也可以提供帮助！此类任务的一个示例是使用小部件。



基于我受ViewModifierSwiftUI 启发的iOS开发经验，我想弄清楚如何以类似方式使用Dart扩展，以减少因小部件树的大量嵌套而导致的视觉混乱。



让我们举个例子吧！



带有嵌套小部件的选项



下面是一个MyWidget内部带有文本的小部件Padding（来自dartpad.dev的标准示例）。



class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return
      Padding(
        padding: const EdgeInsets.all(16),
        child: Text('Hello, World!', style: Theme.of(context).textTheme.headline4)
      );
  }
}


现在，让我们看看如何使用Dart扩展来做同样的事情。



带扩展选项



我们Widget使用方法为类创建扩展padding。调用此方法时，该对象将被包装在Padding：



extension WidgetModifier on Widget {
  Widget padding([EdgeInsetsGeometry value = const EdgeInsets.all(16)]) {
    return Padding(
      padding: value,
      child: this,
    );
  }
}


使用新的扩展名，我们可以更新MyWidget如下：



class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, World!', style: Theme.of(context).textTheme.headline4)
            .padding();
  }
}


, , ! , , .



:



extension WidgetModifier on Widget {

  // ...

  Widget background(Color color) { // 
    return DecoratedBox(
      decoration: BoxDecoration(
        color: color,
      ),
      child: this,
    );
  }

  Widget cornerRadius(BorderRadiusGeometry radius) { //  
    return ClipRRect(
      borderRadius: radius,
      child: this,
    );
  }

  Widget align([AlignmentGeometry alignment = Alignment.center]) { // 
    return Align(
      alignment: alignment,
      child: this,
    );
  }
}


class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, World!', style: Theme.of(context).textTheme.headline4)
            .padding()
            .background(Colors.lightBlue)
            .cornerRadius(BorderRadius.all(Radius.circular(8.0)))
            .padding(EdgeInsets.symmetric(horizontal: 8, vertical: 16))
            .background(Colors.purple);
  }
}




dartpad.dev

? , ! , , .





在本文中，我们考虑了使用与ViewModifierSwiftUI 类似的概念在Flutter项目中形成小部件树的替代方法。通过这种方法，我们可以通过减少小部件树的嵌套来简化它们。而且，我仅展示了此类扩展的几个示例，但是根据相同的原理，您可以为其他情况创建许多新的扩展，它们将同样有用。



感谢您的关注！希望这篇文章对您有所帮助。如果您对此材料有任何疑问或意见，请随时在Twitter上与我联系！



直到下一次！



More articles:


All Articles