一、Divider 组件

Divider 组件是分割线组件 , 可以设置高度 , 颜色等参数 ;

Divider 组件构造函数源码 : 其中包含了可设置的参数选项 ;

class Divider extends StatelessWidget {/// Creates a material design divider.////// The [height], [thickness], [indent], and [endIndent] must be null or/// non-negative.const Divider({Key key,this.height,this.thickness,this.indent,this.endIndent,this.color,}) : assert(height == null || height >= 0.0),assert(thickness == null || thickness >= 0.0),assert(indent == null || indent >= 0.0),assert(endIndent == null || endIndent >= 0.0),super(key: key);
}

代码示例 :

              // Divider 分割线组件Divider(// 设置分割线容器高度height: 20,// 分割线左侧间距indent: 20,// 设置分割线颜色color: Colors.red,),

完整代码示例 :

import 'package:flutter/material.dart';class StatelessWidgetPage extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {// 文本组件样式 , 可以设置给 Text 文本组件// 设置字体大小 20, 颜色红色TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.red);return MaterialApp(title: 'StatelessWidget 组件示例',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(appBar: AppBar(title: Text('StatelessWidget 组件示例'),),// Container 容器使用body: Container(// 设置容器的装饰器 , BoxDecoration 是最常用的装饰器// 可以自行查看 BoxDecoration 中可以设置的属性decoration: BoxDecoration(color: Colors.grey),// 设置 child 子组件居中方式, 居中放置alignment: Alignment.center,// 子组件, 子组件设置为一个 Column 组件child: Column(// Column 子组件, 这里设置 Text 文本组件children: <Widget>[// Text 文本组件// textStyle 是之前创建的 TextStyle textStyle 对象Text('Container 中的 Text 文本组件示例', style: textStyle,),// Icon 图标组件Icon(Icons.map, size: 100, color: Colors.green,),// 关闭按钮CloseButton(),// 返回按钮BackButton(),// Chip 组件Chip(// Chip 组件的图标avatar: Icon(Icons.access_alarm, color: Colors.blue,),label: Text('闹钟', style: textStyle,),),// Divider 分割线组件Divider(// 设置分割线容器高度height: 20,// 分割线左侧间距indent: 20,// 设置分割线颜色color: Colors.red,),],),),),);}
}

运行效果 : 分割线很细 , 不明显 , 而且无法调整分割线的高度 ;

二、Card 卡片组件

Card 卡片组件可设置圆角 , 阴影 , 边框等效果 ;

class Card extends StatelessWidget {/// Creates a material design card.////// The [elevation] must be null or non-negative. The [borderOnForeground]/// must not be null.const Card({Key key,this.color,this.elevation,this.shape,this.borderOnForeground = true,this.margin,this.clipBehavior,this.child,this.semanticContainer = true,}) : assert(elevation == null || elevation >= 0.0),assert(borderOnForeground != null),super(key: key);
}

代码示例 :

              // Card 组件 : 可设置圆角 , 阴影 , 边框 等效果Card(// 设置卡片的背景颜色color: Colors.green,// 设置阴影elevation: 5,// 设置卡片的边距margin: EdgeInsets.all(10),// 设置子组件child: Container(// 设置边距 10padding: EdgeInsets.all(10),// 设置卡片文字 , 设置卡片文字样式child: Text("卡片文字", style: textStyle,),),),

完整代码示例 :

import 'package:flutter/material.dart';class StatelessWidgetPage extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {// 文本组件样式 , 可以设置给 Text 文本组件// 设置字体大小 20, 颜色红色TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.red);return MaterialApp(title: 'StatelessWidget 组件示例',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(appBar: AppBar(title: Text('StatelessWidget 组件示例'),),// Container 容器使用body: Container(// 设置容器的装饰器 , BoxDecoration 是最常用的装饰器// 可以自行查看 BoxDecoration 中可以设置的属性decoration: BoxDecoration(color: Colors.grey),// 设置 child 子组件居中方式, 居中放置alignment: Alignment.center,// 子组件, 子组件设置为一个 Column 组件child: Column(// Column 子组件, 这里设置 Text 文本组件children: <Widget>[// Text 文本组件// textStyle 是之前创建的 TextStyle textStyle 对象Text('Container 中的 Text 文本组件示例', style: textStyle,),// Icon 图标组件Icon(Icons.map, size: 100, color: Colors.green,),// 关闭按钮CloseButton(),// 返回按钮BackButton(),// Chip 组件Chip(// Chip 组件的图标avatar: Icon(Icons.access_alarm, color: Colors.blue,),label: Text('闹钟', style: textStyle,),),// Divider 分割线组件Divider(// 设置分割线容器高度height: 20,// 分割线左侧间距indent: 20,// 设置分割线颜色color: Colors.red,),// Card 组件 : 可设置圆角 , 阴影 , 边框 等效果Card(// 设置卡片的背景颜色color: Colors.green,// 设置阴影elevation: 5,// 设置卡片的边距margin: EdgeInsets.all(10),// 设置子组件child: Container(// 设置边距 10padding: EdgeInsets.all(10),// 设置卡片文字 , 设置卡片文字样式child: Text("卡片文字", style: textStyle,),),),],),),),);}
}

运行效果 :

三、AlertDialog 对话框组件

AlertDialog 对话框组件 , 可设置标题 , 内容 , 等一系列对话框相关的设置 , 下面代码是 AlertDialog 的构造函数源码 ;

class AlertDialog extends StatelessWidget {/// Creates an alert dialog.////// Typically used in conjunction with [showDialog].////// The [contentPadding] must not be null. The [titlePadding] defaults to/// null, which implies a default that depends on the values of the other/// properties. See the documentation of [titlePadding] for details.const AlertDialog({Key key,this.title,this.titlePadding,this.titleTextStyle,this.content,this.contentPadding = const EdgeInsets.fromLTRB(24.0, 20.0, 24.0, 24.0),this.contentTextStyle,this.actions,this.backgroundColor,this.elevation,this.semanticLabel,this.shape,}) : assert(contentPadding != null),super(key: key);

代码示例 :

              // AlertDialog 对话框 , 该弹窗有一个自动圆角和阴影AlertDialog(// 对话框标题title: Text("AlertDialog 对话框标题"),// 对话框内容content: Text("AlertDialog 对话框内容"),),

完整代码示例 :

import 'package:flutter/material.dart';class StatelessWidgetPage extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {// 文本组件样式 , 可以设置给 Text 文本组件// 设置字体大小 20, 颜色红色TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.red);return MaterialApp(title: 'StatelessWidget 组件示例',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(appBar: AppBar(title: Text('StatelessWidget 组件示例'),),// Container 容器使用body: Container(// 设置容器的装饰器 , BoxDecoration 是最常用的装饰器// 可以自行查看 BoxDecoration 中可以设置的属性decoration: BoxDecoration(color: Colors.grey),// 设置 child 子组件居中方式, 居中放置alignment: Alignment.center,// 子组件, 子组件设置为一个 Column 组件child: Column(// Column 子组件, 这里设置 Text 文本组件children: <Widget>[// Text 文本组件// textStyle 是之前创建的 TextStyle textStyle 对象Text('Container 中的 Text 文本组件示例', style: textStyle,),// Icon 图标组件Icon(Icons.map, size: 100, color: Colors.green,),// 关闭按钮CloseButton(),// 返回按钮BackButton(),// Chip 组件Chip(// Chip 组件的图标avatar: Icon(Icons.access_alarm, color: Colors.blue,),label: Text('闹钟', style: textStyle,),),// Divider 分割线组件Divider(// 设置分割线容器高度height: 20,// 分割线左侧间距indent: 20,// 设置分割线颜色color: Colors.red,),// Card 组件 : 可设置圆角 , 阴影 , 边框 等效果Card(// 设置卡片的背景颜色color: Colors.green,// 设置阴影elevation: 5,// 设置卡片的边距margin: EdgeInsets.all(10),// 设置子组件child: Container(// 设置边距 10padding: EdgeInsets.all(10),// 设置卡片文字 , 设置卡片文字样式child: Text("卡片文字", style: textStyle,),),),// AlertDialog 对话框 , 该弹窗有一个自动圆角和阴影AlertDialog(// 对话框标题title: Text("AlertDialog 对话框标题"),// 对话框内容content: Text("AlertDialog 对话框内容"),),],),),),);}
}

效果展示 :

四、相关资源

参考资料 :

Flutter 官网 : https://flutter.dev/
Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 )
官方 GitHub 地址 : https://github.com/flutter
Flutter 中文社区 : https://flutter.cn/
Flutter 实用教程 : https://flutter.cn/docs/cookbook
Flutter CodeLab : https://codelabs.flutter-io.cn/
Dart 中文文档 : https://dart.cn/
Dart 开发者官网 : https://api.dart.dev/
Flutter 中文网 ( 非官方 , 翻译的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )

博客源码下载 :

GitHub 地址 : https://github.com/han1202012/flutter_cmd ( 随博客进度一直更新 , 有可能没有本博客的源码 )
博客源码快照 : https://download.csdn.net/download/han1202012/15484718 ( 本篇博客的源码快照 , 可以找到本博客的源码 )

【Flutter】StatelessWidget 组件 ( Divider 组件 | Card 组件 | AlertDialog 组件 )相关推荐

Flutter组件--卡片效果(card组件)
Card是卡片组件块,内容可以由大多数类型的Widget构成,Card具有圆角和阴影,这让它看起来有立体感. 属性说明 margin 外边距 child 子组件 elevation 阴影值的深度 c ...
Flutter学习笔记（18）--Drawer抽屉组件
如需转载,请注明出处:Flutter学习笔记(18)--Drawer抽屉组件 Drawer(抽屉组件)可以实现类似抽屉拉出和推入的效果,可以从侧边栏拉出导航面板.通常Drawer是和ListView组 ...
React 组件封装之 Card 卡片
React 组件封装之 Card 一.Card 卡片二.使用案例三.API 使用指南四.源代码一.Card 卡片组件说明: 使列表成为卡片形式的布局. 效果展示: 二.使用案例 import ...
JAVA card 应用开发（四） Java Card CAP 文件组件分析
Java Card CAP 文件组件分析来源:http://www.dreamingfish123.info/?cat=79 Java Card CAP 文件组件分析 00.1 Java Card ...
Flutter | 超简单仿微信QQ侧滑菜单组件（改）
文章目录一.明确需求二.实现需求 1. 滑动菜单实现使用`SingleChildScrollView`: 2. 列表滑动不够距离则菜单再次隐藏,距离足够则完全展示菜单. 3. 菜单支持事件处理. ...
为react组件增加扩展class,解决react组件不能自定义className不生效的问题
这里写自定义目录标题为react组件增加扩展class,解决react组件不能自定义className不生效的问题最近在写shopify,发现不能对shopify的组件再次加class,弄起来很麻 ...
vue 如何处理两个组件异步问题_Vue动态异步组件实现思路及其问题
前言:在vue 官方资料中,我们可以可以很学会如何通过vue构建"动态组件"以及"异步组件",然而,在官方资料中,并没有涉及到真正的"动态异步&quo ...
C#组件系列——又一款日志组件：Elmah的学习和分享
前言:好久没动笔了,都有点生疏,12月都要接近尾声,可是这月连一篇的产出都没有,不能坏了"规矩",今天还是来写一篇.最近个把月确实很忙,不过每天早上还是会抽空来园子里逛逛.一如既往 ...
vue中子组件和子组件之间怎么通信_vue.js组件之间如何通信？
vue.js组件之间如何通信?下面本篇文章就来给大家介绍一下Vue.js组件间通信方式.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 平时在使用Vue框架的业务开发中,组件不仅仅要 ...

【Flutter】StatelessWidget 组件 ( Divider 组件 | Card 组件 | AlertDialog 组件 )

文章目录

一、Divider 组件

二、Card 卡片组件

三、AlertDialog 对话框组件

四、相关资源

【Flutter】StatelessWidget 组件 ( Divider 组件 | Card 组件 | AlertDialog 组件 )相关推荐

最新文章

热门文章

【Flutter】StatelessWidget 组件 ( Divider 组件 | Card 组件 | AlertDialog 组件 )

文章目录

一、Divider 组件

二、Card 卡片组件

三、AlertDialog 对话框组件

四、 相关资源

【Flutter】StatelessWidget 组件 ( Divider 组件 | Card 组件 | AlertDialog 组件 )相关推荐

最新文章

热门文章

四、相关资源