主要看幾個常用的使用控件：

main.dart?代碼，下面常用 Widget 示例的代碼。

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(body: Center(child: _buildWidget(),),),);}Widget _buildWidget() {//TODO}}

flutter部分的基礎控件：

?

一、文本： Text

1）基本使用

return Text('Show Regular Text');

七種不同樣式文本：

import 'package:flutter/material.dart'; class TextDemo extends StatelessWidget {@overrideWidget build(BuildContext context) {return new Scaffold(appBar: new AppBar(title: new Text('文本控件'),),body: new Column(children: <Widget>[new Text('紅色+黑色刪除線+25號',style: new TextStyle(color: const Color(0xffff0000),decoration: TextDecoration.lineThrough,decorationColor: const Color(0xff000000),fontSize: 25.0,),),new Text('橙色+下劃線+24號',style: new TextStyle(color: const Color(0xffff9900),decoration: TextDecoration.underline,fontSize: 24.0,),),new Text('虛線上劃線+23號+傾斜',style: new TextStyle(decoration: TextDecoration.overline,decorationStyle: TextDecorationStyle.dashed,fontSize: 23.0,fontStyle: FontStyle.italic,),),new Text('serif字體+24號',style: new TextStyle(fontFamily: 'serif',fontSize: 26.0,),),new Text('monospace字體+24號+加粗',style: new TextStyle(fontFamily: 'monospace',fontSize: 24.0,fontWeight: FontWeight.bold,),),new Text('天藍色+25號+2行跨度',style: new TextStyle(color: const Color(0xff4a86e8),fontSize: 25.0,height: 2.0,),),new Text('24號+2個字母間隔',style: new TextStyle(fontSize: 24.0,letterSpacing: 2.0,),),]),);} } void main() {runApp(new MaterialApp(title: 'Flutter教程',home: new TextDemo(),),); }

2）設置字體樣式

屬性：style

設置粗體：

return Text('Show Bold Text',style: TextStyle(fontWeight: FontWeight.bold),);

設置顏色：

return Text('Show Bold Red Text',style: TextStyle(fontWeight: FontWeight.bold, color: Colors.red),);

?

3）設置最大行數及省略號

屬性：maxLines、overflow

return Container(width: 100,child: Text('設置文本超過 100，這樣能夠看到效果，這里設置最多顯示一行',maxLines: 1, //設置最大行數overflow: TextOverflow.ellipsis, //設置超過顯示省略號),);

?

?

二、圖片：?Image

1）本地加載圖片

第一步：創建放置圖片的文件夾，這里假設我們在?my_flutter?下面創建?assets/images/2.0x?和?assets/images/3.0x?文件夾用于存放本地圖片。

第二步：拷貝圖片 img.png 到上述文件夾，一般如果切圖是用 sketch，則直接選擇對應的 2 倍圖和 3 倍圖。

第三步：在?pubspec.yaml?文件確定要使用的圖片資源位置。這里可以定義：

assets:- assets/images/img.png

第四步：使用如下。

return Image.asset('assets/images/img.png')

假如果有很多圖片在同一個文件夾下面，可以在?pubspec.yaml?里面使用目錄定義的。

修改?pubspec.yaml?文件之后建議運行之前增加清理工作。

比如之前是執行?flutter run

修改之后建議執行?flutter packages get;flutter clean;flutter run

上面定義的位置可以直接在?pubspec.yaml?文件搜索?assets，有注釋講解的位置就是你要添加的位置了。

2）網絡加載圖片

給定一個圖片 url，執行下面代碼即可：

return Image.network('https://upload-images.jianshu.io/upload_images/5361063-cfad13c672a06084.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240');

3）指定寬高

指定寬高是直接使用?width?和?height?屬性。

比如網絡加載圖片指定寬高如下：

return Image.network('https://upload-images.jianshu.io/upload_images/5361063-cfad13c672a06084.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',width: 300,height: 200,);

?

?

三、Column

前面兩個講的都是單個小組件。接下來我們講的是類似于布局的組件。（還是組件，畢竟 Flutter 一切皆 Widget）

1）基本使用

?

?Android 開發的話，可以想到 LinearLayout 里面的 orientation 設置為 vertical 時的布局。

如下：

可理解，Column 是列，布局只有一列。就是以上這樣。

代碼示例：

return Column(children: <Widget>[Image.asset('assets/images/wechat.png'),Image.network('http://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87&step_word=&hs=0&pn=0&spn=0&di=177430&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=3300305952%2C1328708913&os=188573792%2C343995474&simid=4174703319%2C828922280&adpicid=0&lpn=0&ln=803&fr=&fmq=1563441771961_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fpic37.nipic.com%2F20140113%2F8800276_184927469000_2.png&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bgtrtv_z%26e3Bv54AzdH3Ffi5oAzdH3F9AzdH3F898AzdH3Flm808c0_z%26e3Bip4s&gsm=0&rpstart=0&rpnum=0&islist=&querylist=&force=undefined'),Image.network('https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87&step_word=&hs=0&pn=2&spn=0&di=193160&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=180868167%2C273146879&os=17615934%2C454074307&simid=3310604703%2C440404647&adpicid=0&lpn=0&ln=803&fr=&fmq=1563441771961_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fimg.redocn.com%2Fsheji%2F20141219%2Fzhongguofengdaodeliyizhanbanzhijing_3744115.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3B6j15vg_z%26e3Bv54AzdH3Fziwgkwg_n09988c_z%26e3Bip4s&gsm=0&rpstart=0&rpnum=0&islist=&querylist=&force=undefined',width: 300,height: 200,)],);

?

設置一下 children 屬性就ok。

在里面的 Widget 數組填充我們要展示的 Widget 即可。

劉海可以設置如下：

return Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Image.asset('assets/images/wechat.png'),Image.network('http://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87&step_word=&hs=0&pn=0&spn=0&di=177430&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=3300305952%2C1328708913&os=188573792%2C343995474&simid=4174703319%2C828922280&adpicid=0&lpn=0&ln=803&fr=&fmq=1563441771961_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fpic37.nipic.com%2F20140113%2F8800276_184927469000_2.png&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bgtrtv_z%26e3Bv54AzdH3Ffi5oAzdH3F9AzdH3F898AzdH3Flm808c0_z%26e3Bip4s&gsm=0&rpstart=0&rpnum=0&islist=&querylist=&force=undefined'),Image.network('http://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87&step_word=&hs=0&pn=0&spn=0&di=177430&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=3300305952%2C1328708913&os=188573792%2C343995474&simid=4174703319%2C828922280&adpicid=0&lpn=0&ln=803&fr=&fmq=1563441771961_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fpic37.nipic.com%2F20140113%2F8800276_184927469000_2.png&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bgtrtv_z%26e3Bv54AzdH3Ffi5oAzdH3F9AzdH3F898AzdH3Flm808c0_z%26e3Bip4s&gsm=0&rpstart=0&rpnum=0&islist=&querylist=&force=undefined',width: 300,height: 200,)],);

?

?

四、Row

1）基本使用

理解為創建一組水平的子組件集合， LinearLayout 里面的 orientation 設置為 horizontal 時的布局。

也可理解 Row 代表行，因此只有一行。

如下：

橫向布局 Sample：

return Row(children: <Widget>[Text('Widget One', style: TextStyle(color: Colors.blue),),Text('Widget Two'),],);

效果如下：

有一行，所以使用 Row。

?

2）mainAxisAlignment

mainAxisAlignment 你可以認為是主軸的對齊方式，對于水平的 Row，那就是水平方向的對齊。

影響整個 Row

居中對齊設置如下：

return Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text('Widget One', style: TextStyle(color: Colors.blue),),Text('Widget Two'),],);

這樣效果顯示就是居中。

五、RaisedButton

Material Design 風格的浮動按鈕，以方形紙片樣式懸停在界面上，點擊后會產生墨水擴散效果。避免在dialog和card控件里使用，一般彈出式的控件建議使用扁平化按鈕，減少布局層次疊加。使用時，要實現onPressed回調方法，否則按鈕處于禁用狀態，默認顯示disabledColor樣式的扁平化按鈕，并且此時更改按鈕的顏色不會生效。

注意該控件的父控件必須是Material控件。如只需要點擊后產生墨水擴散效果，但不想使用按鈕，請考慮直接使用InkWell控件。

六、Container

Container 用的比較多一些，抽時間學習一下再分享。

Fliutter控件月Android控件：

Flutter控件Android控件

AppBar	ActionBar/ToolBar
ListView	ListView/RecyclerView
Text	TextView
Center	ViewGroup
Container	RelativeLayout
FloatingActionButton	FloatingActionButton(design庫里面的)
BottomNavigationBar	BottomNavigation(design庫里面的)
RaisedButton/Button	Button
Column	LinearLayout的android:orientation="vertical"
Row	android:orientation="horizontal"
DecorationImage	ImageView
Image	ImageView
Stack	FrameLayout/RelativeLayout
Algin	alginParentXXX屬性
resizeToAvoidBottomPadding	android:windowSoftInputMode=”adjustResize屬性
SingleChildScrollView	ScrollView
CustomScrollerView	Recyclerview

?

總結

以上是生活随笔為你收集整理的Flutter基础之部分控件学习的全部內容，希望文章能夠幫你解決所遇到的問題。

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