文章目錄

• 一、Divider 組件
• 二、Card 卡片組件
• 三、AlertDialog 對話框組件
• 四、 相關(guān)資源

一、Divider 組件

---

Divider 組件是分割線組件 , 可以設(shè)置高度 , 顏色 等參數(shù) ;

Divider 組件構(gòu)造函數(shù)源碼 : 其中包含了可設(shè)置的參數(shù)選項 ;

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(// 設(shè)置分割線容器高度height: 20,// 分割線左側(cè)間距indent: 20,// 設(shè)置分割線顏色color: Colors.red,),

完整代碼示例 :

import 'package:flutter/material.dart';class StatelessWidgetPage extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {// 文本組件樣式 , 可以設(shè)置給 Text 文本組件// 設(shè)置字體大小 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(// 設(shè)置容器的裝飾器 , BoxDecoration 是最常用的裝飾器// 可以自行查看 BoxDecoration 中可以設(shè)置的屬性decoration: BoxDecoration(color: Colors.grey),// 設(shè)置 child 子組件居中方式, 居中放置alignment: Alignment.center,// 子組件, 子組件設(shè)置為一個 Column 組件child: Column(// Column 子組件, 這里設(shè)置 Text 文本組件children: <Widget>[// Text 文本組件// textStyle 是之前創(chuàng)建的 TextStyle textStyle 對象Text('Container 中的 Text 文本組件示例', style: textStyle,),// Icon 圖標組件Icon(Icons.map, size: 100, color: Colors.green,),// 關(guān)閉按鈕CloseButton(),// 返回按鈕BackButton(),// Chip 組件Chip(// Chip 組件的圖標avatar: Icon(Icons.access_alarm, color: Colors.blue,),label: Text('鬧鐘', style: textStyle,),),// Divider 分割線組件Divider(// 設(shè)置分割線容器高度height: 20,// 分割線左側(cè)間距indent: 20,// 設(shè)置分割線顏色color: Colors.red,),],),),),);} }

運行效果 : 分割線很細 , 不明顯 , 而且無法調(diào)整分割線的高度 ;

二、Card 卡片組件

---

Card 卡片組件可設(shè)置圓角 , 陰影 , 邊框 等效果 ;

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 組件 : 可設(shè)置圓角 , 陰影 , 邊框 等效果Card(// 設(shè)置卡片的背景顏色color: Colors.green,// 設(shè)置陰影elevation: 5,// 設(shè)置卡片的邊距margin: EdgeInsets.all(10),// 設(shè)置子組件child: Container(// 設(shè)置邊距 10padding: EdgeInsets.all(10),// 設(shè)置卡片文字 , 設(shè)置卡片文字樣式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) {// 文本組件樣式 , 可以設(shè)置給 Text 文本組件// 設(shè)置字體大小 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(// 設(shè)置容器的裝飾器 , BoxDecoration 是最常用的裝飾器// 可以自行查看 BoxDecoration 中可以設(shè)置的屬性decoration: BoxDecoration(color: Colors.grey),// 設(shè)置 child 子組件居中方式, 居中放置alignment: Alignment.center,// 子組件, 子組件設(shè)置為一個 Column 組件child: Column(// Column 子組件, 這里設(shè)置 Text 文本組件children: <Widget>[// Text 文本組件// textStyle 是之前創(chuàng)建的 TextStyle textStyle 對象Text('Container 中的 Text 文本組件示例', style: textStyle,),// Icon 圖標組件Icon(Icons.map, size: 100, color: Colors.green,),// 關(guān)閉按鈕CloseButton(),// 返回按鈕BackButton(),// Chip 組件Chip(// Chip 組件的圖標avatar: Icon(Icons.access_alarm, color: Colors.blue,),label: Text('鬧鐘', style: textStyle,),),// Divider 分割線組件Divider(// 設(shè)置分割線容器高度height: 20,// 分割線左側(cè)間距indent: 20,// 設(shè)置分割線顏色color: Colors.red,),// Card 組件 : 可設(shè)置圓角 , 陰影 , 邊框 等效果Card(// 設(shè)置卡片的背景顏色color: Colors.green,// 設(shè)置陰影elevation: 5,// 設(shè)置卡片的邊距margin: EdgeInsets.all(10),// 設(shè)置子組件child: Container(// 設(shè)置邊距 10padding: EdgeInsets.all(10),// 設(shè)置卡片文字 , 設(shè)置卡片文字樣式child: Text("卡片文字", style: textStyle,),),),],),),),);} }

運行效果 :

三、AlertDialog 對話框組件

---

AlertDialog 對話框組件 , 可設(shè)置標題 , 內(nèi)容 , 等一系列對話框相關(guān)的設(shè)置 , 下面代碼是 AlertDialog 的構(gòu)造函數(shù)源碼 ;

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 對話框標題"),// 對話框內(nèi)容content: Text("AlertDialog 對話框內(nèi)容"),),

完整代碼示例 :

import 'package:flutter/material.dart';class StatelessWidgetPage extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {// 文本組件樣式 , 可以設(shè)置給 Text 文本組件// 設(shè)置字體大小 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(// 設(shè)置容器的裝飾器 , BoxDecoration 是最常用的裝飾器// 可以自行查看 BoxDecoration 中可以設(shè)置的屬性decoration: BoxDecoration(color: Colors.grey),// 設(shè)置 child 子組件居中方式, 居中放置alignment: Alignment.center,// 子組件, 子組件設(shè)置為一個 Column 組件child: Column(// Column 子組件, 這里設(shè)置 Text 文本組件children: <Widget>[// Text 文本組件// textStyle 是之前創(chuàng)建的 TextStyle textStyle 對象Text('Container 中的 Text 文本組件示例', style: textStyle,),// Icon 圖標組件Icon(Icons.map, size: 100, color: Colors.green,),// 關(guān)閉按鈕CloseButton(),// 返回按鈕BackButton(),// Chip 組件Chip(// Chip 組件的圖標avatar: Icon(Icons.access_alarm, color: Colors.blue,),label: Text('鬧鐘', style: textStyle,),),// Divider 分割線組件Divider(// 設(shè)置分割線容器高度height: 20,// 分割線左側(cè)間距indent: 20,// 設(shè)置分割線顏色color: Colors.red,),// Card 組件 : 可設(shè)置圓角 , 陰影 , 邊框 等效果Card(// 設(shè)置卡片的背景顏色color: Colors.green,// 設(shè)置陰影elevation: 5,// 設(shè)置卡片的邊距margin: EdgeInsets.all(10),// 設(shè)置子組件child: Container(// 設(shè)置邊距 10padding: EdgeInsets.all(10),// 設(shè)置卡片文字 , 設(shè)置卡片文字樣式child: Text("卡片文字", style: textStyle,),),),// AlertDialog 對話框 , 該彈窗有一個自動圓角和陰影AlertDialog(// 對話框標題title: Text("AlertDialog 對話框標題"),// 對話框內(nèi)容content: Text("AlertDialog 對話框內(nèi)容"),),],),),),);} }

效果展示 :

四、 相關(guān)資源

---

參考資料 :

• Flutter 官網(wǎng) : https://flutter.dev/
• Flutter 開發(fā)文檔 : https://flutter.cn/docs ( 強烈推薦 )
• 官方 GitHub 地址 : https://github.com/flutter
• Flutter 中文社區(qū) : https://flutter.cn/
• Flutter 實用教程 : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart 中文文檔 : https://dart.cn/
• Dart 開發(fā)者官網(wǎng) : https://api.dart.dev/
• Flutter 中文網(wǎng) ( 非官方 , 翻譯的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter 相關(guān)問題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )

博客源碼下載 :

• GitHub 地址 : https://github.com/han1202012/flutter_cmd ( 隨博客進度一直更新 , 有可能沒有本博客的源碼 )

• 博客源碼快照 : https://download.csdn.net/download/han1202012/15484718 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的【Flutter】StatelessWidget 组件 ( Divider 组件 | Card 组件 | AlertDialog 组件 )的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。