关于flutter:这10个每个开发者都必须知道的Widgets

原文

https://genotechies.medium.co...

这些是咱们将要探讨的 widgets:

Dismissible
SizedBox
Draggable
Flexible
MediaQuery
Spacer
AnimatedIcon
Placeholder
RichText
ReorderableListView

注释

Dismissible

滑动和暗藏是挪动应用程序中常见的 UI 模式。要在 Flutter 做到这一点，能够应用 Dismissible widget。它有一个 child，background 和 key 。它将检测滑动手势和动画的 child 小部件。你也能够双向和垂直的替换。你能够用本人的形式应用更多的属性。您能够通过复制并粘贴上面的代码来尝试。

class _MyHomePageState extends State<MyHomePage> {  List<String> _values = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];  @override  Widget build(BuildContext context) {    return ListView.separated(        itemCount: _values.length,        padding: const EdgeInsets.all(5.0),        separatorBuilder: (context, index) => Divider(          color: Colors.black,        ),        itemBuilder: (context, index) {          return Dismissible(            key: Key('item ${_values[index]}'),            onDismissed: (DismissDirection direction) {              if (direction == DismissDirection.startToEnd) {                print("Selected Item");              } else {                print('Delete item');              }              setState(() {                _values.removeAt(index);              });            },            child: ListTile(              leading: Icon(Icons.email, size: 50),              title: Text(_values[index]),            ),          );        }    );  }}

SizedBox

这是一个小部件示例。当你有一个小部件，应该是固定的大小。例如，一个按钮的大小应该为 width = 100px 和 height = 50px。您须要将按钮包装在 SizedBox 中。上面是类的构造函数。

const SizedBox({Key key,double width,double height,Widget child})

Draggable

在许多应用程序中，咱们能够看到拖动选项，如在电子邮件，文档拖动。有了这个 Flutter 小部件，很容易实现这个性能。在这里，咱们拖动数据。这里我传递一个从 Draggable 到 DragTarget 的字符串。而后你须要阐明你传递的数据是什么，子属性显示你的数据。DragTarget 指标是拖曳 Draggable 的着陆区。次要有三种调用办法。

onwillAccept: 以测试挪动指标是否能够承受数据
onAccept: 调用无效的可拖动区域
onLeave: 当区域不胜利时调用

Flexible

大多数时候，咱们应用行和列来显示一组子窗口小部件。但他们须要灵便的大小来显示与父母的相关性。您只须要将所有子窗口小部件包装在一个灵便的窗口小部件中。Flex 值决定每个子元素取得多少空间。当扭转屏幕大小时，它不会扭转儿童之间的比例。

child:  Column(  children: <Widget>[    Flexible(        flex: 3,        child: Container(          color: Colors.red,        )    ),    Flexible(        flex: 1,        child: Container(          color: Colors.green,        )    ),    Flexible(        flex: 2,        child: Container(          color: Colors.blue,        )    ),  ],)

MediaQuery

如果你的指标是在手机和选项卡上运行你的应用程序，你的应用程序须要反对不同的用户界面大小。此外，有时用户有本人的 UI 冀望，如字体大小或小，方向，填充等。应用这个 MediaQuery，您能够取得屏幕大小信息和用户首选项，并依据这些细节构建布局。

const MediaQueryData({  this.size = Size.zero,  this.devicePixelRatio = 1.0,  this.textScaleFactor = 1.0,  this.platformBrightness = Brightness.light,  this.padding = EdgeInsets.zero,  this.viewInsets = EdgeInsets.zero,  this.systemGestureInsets = EdgeInsets.zero,  this.viewPadding = EdgeInsets.zero,  this.alwaysUse24HourFormat = false,  this.accessibleNavigation = false,  this.invertColors = false,  this.highContrast = false,  this.disableAnimations = false,  this.boldText = false,  this.navigationMode = NavigationMode.traditional,})

这是一个提取屏幕尺寸的示例。

MediaQueryData deviceInfo = MediaQuery.of(context);

输入

I/flutter ( 6508): size: Size(360.0, 592.0)I/flutter ( 6508): padding: EdgeInsets(0.0, 24.0, 0.0, 0.0)I/flutter (6508) : Size: Size (360.0,592.0) i/flutter (6508) : padding: EdgeInsets (0.0,24.0,0.0,0.0)

Spacer

这是另一个小部件，您最好在当时自定义中应用它。在一行中，咱们能够应用 MainAxisAlignment 定义子级之间的空间。然而应用 Spacer 小部件，你能够做得更多。只需在其余小部件之间增加距离符即可。而后 children 扩大开来制作额定的空间。有一个 flex 属性来确定绝对大小。

SizedBox(  height: 50,  child: Row(    children: <Widget>[      Container(        width: 50,        color: Colors.red,      ),      Spacer(flex: 2,),      Container(        width: 50,        color: Colors.green,      ),      Spacer(flex: 1,),      Container(        width: 50,        color: Colors.blue,      ),      Container(        width: 50,        color: Colors.yellow,      ),    ],  ),);

AnimatedIcon

曾经有一个微小的图标集曾经在框架。也有动画图标，你能够在你的应用程序中应用。要应用这些，咱们须要一个 AnimatedIcon 小部件。你须要提供图标和次要的进度属性。Flutter 提供了许多不同的动画图标供您应用。

import 'package:flutter/animation.dart';import 'package:flutter/material.dart';void main() => runApp(LogoApp());class LogoApp extends StatefulWidget {  _LogoAppState createState() => _LogoAppState();}class _LogoAppState extends State<LogoApp> with SingleTickerProviderStateMixin {  bool isPlaying = false;  Animation animation;  AnimationController controller;  @override  void initState() {    super.initState();    controller = AnimationController(        duration: const Duration(milliseconds: 500), vsync: this);  }  @override  Widget build(BuildContext context) {    return MaterialApp(      home: Scaffold(        body: Center(            child: IconButton(              iconSize: 70,              icon: AnimatedIcon(                icon: AnimatedIcons.play_pause,                progress: controller,              ),              onPressed: () => _onpressed(),            )),      ),    );  }  @override  void dispose() {    controller.dispose();    super.dispose();  }  _onpressed() {    setState(() {      isPlaying = !isPlaying;      isPlaying ? controller.forward() : controller.reverse();    });  }}

Placeholder

有时您须要为 UI 的特定组件保留空间，直到最初确定该组件的视图。因而，与其保留一个空间，咱们能够在那里搁置 Plaholder 以便进一步实现。在你能够开始施行它之后。这将填补所有提到的空间。

Center(  child: Column(    children: <Widget>[      Container(          child: Placeholder()      ),      Expanded(        child: Row(          children: <Widget>[            Flexible(              flex: 1,              child: Placeholder(color: Colors.red,),            ),            Flexible(              flex: 4,              child: Placeholder(color: Colors.green,),            ),          ],        ),      )    ],  )),

RichText

文本是每个应用程序的次要 UI 组件之一。因而字体设计十分重要。你必须留神文字的款式和外观，如文字大小、字体、款式等。有时候你须要显示一个联合了不同格调的段落。用粗体示意强调，或用斜体示意，或用下划线示意，或用不同的色彩，不同的字体大小，或同时显示所有内容。你最好应用 RichText。上面是一个例子:

RichText(  text: TextSpan(    style: TextStyle(color: Colors.black, fontSize: 24),    children: <TextSpan>[      TextSpan(text: 'Flutter ', style: TextStyle(color: Colors.red)),      TextSpan(text: 'Placeholder '),      TextSpan(text: 'Widget', style: TextStyle(decoration: TextDecoration.underline, fontStyle: FontStyle.italic))    ],  ),)

ReorderableListView

在咱们的应用程序中，咱们应用列表视图来显示一组数据并滚动它们。通常，您不能挪动和更改列表中的地位。ReorderbaleListView 是解决方案。有了它，用户能够长时间按下该我的项目，并将其放入一个新的他或她喜爱的中央。列表视图的每个项都有一个用于标识该项的键，在挪动该项时，调用 onReorder 办法并跟踪挪动和更改。上面是一个例子。

class _TopListState extends State<TopList> {  List<String> topMovies = [    "It Happened One Night(1934)",    "Black Panther(2018)",    "Citizen Kane(1941)",    "Parasite (Gisaengchung)(2019)",    "Avengers: Endgame(2019)",    "The Wizard of Oz(1939)",    "Casablanca(1942)",    "Knives Out(2019)"  ];  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("ReorderableListView Example"),      ),      body: ReorderableListView(        onReorder: (int oldIndex, int newIndex) {},        children: getListItems(),      ),    );  }  List<ListTile> getListItems() =>      topMovies          .asMap()          .map((i, item) => MapEntry(i, buildTenableListTile(item, i)))          .values          .toList();  ListTile buildTenableListTile(String item, int index) {    return ListTile(      key: ValueKey(item),      title: Text(item),      leading: Text("${index + 1}"),    );  }}

https://ducafecat.tech/

https://github.com/ducafecat

往期

开源

GetX Quick Start

https://github.com/ducafecat/...

新闻客户端

https://github.com/ducafecat/...

strapi 手册译文

https://getstrapi.cn

微信探讨群 ducafecat