共计 6072 个字符,预计需要花费 16 分钟才能阅读完成。
原文
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
系列汇合
译文
https://ducafecat.tech/catego…
Dart 编程语言根底
https://space.bilibili.com/40…
Flutter 零根底入门
https://space.bilibili.com/40…
Flutter 实战从零开始 新闻客户端
https://space.bilibili.com/40…
Flutter 组件开发
https://space.bilibili.com/40…
Flutter Bloc
https://space.bilibili.com/40…
Flutter Getx4
https://space.bilibili.com/40…
Docker Yapi
https://space.bilibili.com/40…