文章目錄

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

一、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 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。