Flutter鍏ラ棬鍩虹

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Flutter鍏ラ棬鍩虹相关的知识，希望对你有一定的参考价值。

鏍囩锛?a href='http://www.mamicode.com/so/1/package' title='package'>package   amber   -o   bottom   tin   娉ㄦ剰   璇嗗埆   datetime   sch   

Flutter鏄疓oogle寮€鍙戠殑涓€濂楀叏鏂扮殑璺ㄥ钩鍙般€佸紑婧怳I妗嗘灦(鏈川涓婂氨鏄痵dk)銆?鏀寔iOS銆丄ndroid绯荤粺锛屽苟涓旀槸Fuchsia绯荤粺鐨勯粯璁ゅ紑鍙戝浠躲€傛闈㈠拰web涓婄殑鏀寔涔熼兘鍦ㄥ疄楠屼腑銆?br /> Flutter鐗圭偣锛氳法骞冲彴锛團lutter鏄疐uchsia鐨勫紑鍙戞鏋讹紝鍚屾椂鏀寔Android銆両OS锛夛紝濯茬編鍘熺敓鎬ц兘锛岀儹閲嶈浇(鐩墠涓嶆敮鎸佺儹鏇存柊锛屼絾宸插姞鍏?019宸ヤ綔璁″垝)銆?/p>

鍏跺畼鏂圭紪绋嬭瑷€涓?strong>Dart锛?a href="https://juejin.im/post/5bcc8527f265da0aff17729a" rel="nofollow" target="_blank">鐔熸倝Dart璇█銆?/p>

鍏ラ棬缃戠珯锛?a href="https://flutterchina.club/" rel="nofollow" target="_blank">Flutter涓枃缃?/a> Flutter瀹樼綉锛堣嫳鏂囷級

1銆佸伐绋嬪熀纭€绠€浠?/h5>
1.1 Dart瀵煎寘瑙勫垯

锛?锛夊鍖卍art搴撻噷闈㈢殑鍖?/p> 

import 鈥榙art:html鈥?span class="token punctuation">;

锛?锛夊鍏ubspec.yaml 鐨刣ependencies渚濊禆鐨勫寘

import 鈥榩ackage:test/test.dart鈥?span class="token punctuation">;

锛?锛夊鍏ヨ矾寰勫寘锛宐ase涓篺lutter鏍圭洰褰?/p> 

import 鈥榩ackage:base/components/swiper.dart鈥?span class="token punctuation">;

锛?锛夊彧瀵煎叆foo

import 鈥榩ackage:lib1/lib1.dart鈥?show foo;

锛?锛塈m闄や簡foo閮藉鍏?/p> 

import 鈥榩ackage:lib2/lib2.dart鈥?hide foo;

锛?锛夊寘閲岄潰瀛樺湪鏍囪瘑绗﹀啿绐?/p> 

import 鈥榩ackage:lib1/lib1.dart鈥?span class="token punctuation">;
import 鈥榩ackage:lib2/lib2.dart鈥?as lib2;

锛?锛夊欢杩熷姞杞斤紙鎳掑姞杞斤級鍏佽搴旂敤绋嬪簭鍦ㄩ渶瑕佹椂鍔犺浇搴撱€備互涓嬫槸涓€浜涙偍鍙兘浣跨敤寤惰繜鍔犺浇鐨勬儏鍐碉細
   鍑忓皯搴旂敤绋嬪簭鐨勫垵濮嬪惎鍔ㄦ椂闂淬€?br />    渚嬪锛屾墽琛孉 / B娴嬭瘯 - 璇曠敤绠楁硶鐨勫叾浠栧疄鐜般€?br />    鍔犺浇寰堝皯浣跨敤鐨勫姛鑳斤紝渚嬪鍙€夌殑瀵硅瘽妗嗐€?/p> 

import 鈥榩ackage:greetings/hello.dart鈥?deferred as hello;
1.2 宸ョ▼閰嶇疆鏂囦欢锛?/h6>

Flutter椤圭洰涓殑pubspec.yaml鏂囦欢鐩稿綋浜嶢ndroid椤圭洰涓殑gradle鏂囦欢锛岄」鐩殑淇℃伅浠ュ強渚濊禆鍦ㄦ鏂囦欢涓０鏄庛€備緷璧栧寘鐢眕ub鍖呬粨搴撶鐞嗭細https://pub.dartlang.org/ 锛屾湭鍙戝竷鍦╬ub鍖呬粨搴撶殑鎻掍欢鍙互浣跨敤鏈湴鏂囦欢璺緞锛岀敋鑷冲彲浠ョ洿鎺ヤ娇鐢╣it椤圭洰鍦板潃銆?鍙傝€冿細https://flutterchina.club/using-packages/

渚濊禆鍐茬獊锛氱敤any鏉ヨВ鍐筹紝浼氭壘鍒版渶鍚堥€傜殑涓嶅啿绐佺増鏈紝鍐嶅埌 pubspec.lock涓壘鍒扮増鏈彿鏇挎崲锛屾渶缁堜笉瑕佺洿鎺ョ敤any锛屾槸涓闄┿€?/p> 

#name寰堥噸瑕侊紝濡傛灉淇敼浜唍ame鎵€鏈夌殑dart鐨勬枃浠剁殑import鍓嶅紩鐢ㄧ殑鏈湴鐨勬枃浠跺晩鐨勫寘鍚嶉兘闇€瑕佷慨鏀?
name: flutterdemo
description: A new Flutter application.
 
dependencies:
  flutter:
    sdk: flutter
 
 #娣诲姞渚濊禆packages 
  cupertino_icons: ^0.1.2
  english_words: ^3.1.0
 # image_picker: ^0.4.8
 
dev_dependencies:
  flutter_test:
    sdk: flutter
 
  #鍚敤鍥介檯鍖?
  flutter_localizations:
    sdk: flutter
 
flutter:
 
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
  # To add assets to your application, add an assets section, like this:
  #娣诲姞璧勬簮锛屼笉鍗曞崟鏄浘鐗囷紝images鏄釜鍜宲ubspec.yaml閰嶇疆鏂囦欢鍚岀骇鐨勭洰褰曪紝濡傛灉涓嶅悓绾э紝闇€瑕佹坊鍔?.
  assets:
        - images/park.jpg
        - images/lake.jpg
        - images/touxiang.jpg
  #  - images/a_dot_burr.jpeg
  #  - images/a_dot_ham.jpeg
   #瀛椾綋璁剧疆
   fonts:
     - family: Schyler
       fonts:
       - asset: fonts/Schyler-Regular.ttf
        - asset: fonts/Schyler-Italic.ttf
           style: italic
     - family: Trajan Pro
       fonts:
      - asset: fonts/TrajanPro.ttf
      - asset: fonts/TrajanPro_Bold.ttf
        weight: 700
2銆佸叧浜嶮aterialApp鍜孲caffold锛?/h5>

Flutter鎻愪緵浜嗕袱濂椾笉鍚岄鏍肩殑UI鎺т欢锛屽垎鍒槸绫籄ndroid椋庢牸鐨凪aterialApp鍜岀被IOS椋庢牸鐨凜upertinoApp銆備袱绉嶉鏍间笅闈㈢殑widget涓嶈兘瀹屽叏閫氱敤锛屼笖Material椋庢牸鐨剋idget鏁伴噺瑕佸涓€浜涖€?/p>

~ MaterialApp鏄疐lutter鎻愪緵缁橝ndroid鐨勪竴涓熀纭€widget锛岄噰鐢ㄤ簡鏉愭枡璁捐椋庢牸銆?br /> 缁忚繃瀹炶返锛孧aterialApp鍏ㄥ眬鏈€濂藉彧鏈変竴涓紝浣滀负涓荤晫闈紝app鐨勪富棰樸€佷富椤电瓑鍏ㄥ眬璁剧疆鍙互鍦ㄦ瀹氫箟銆?br /> 鏈€鍒濇寜鐓у畼缃戞暀绋嬫瘡涓猵age鎴戦兘杩斿洖鐨凪aterialApp锛屾樉绀烘槸娌′粈涔堥棶棰橈紝鍥犱负閮芥槸widget锛屼絾鏄細鍑虹幇鍗￠】鍜屽叾浠栫晫闈笂鐨勯棶棰橈紝澶у鍙互鑷繁璇曚竴涓嬨€?/p>

~ 瀛愰〉闈㈢洿鎺ヨ繑鍥濻caffold锛孲caffold鏄疢aterialApp鐨勫竷灞€瀹炵幇锛屾彁渚涗簡appbar锛宖loatingActionButton锛宒rawer锛宐ottomNavigationBar绛塎D椋庢牸鐨勬帶浠禷pi銆?/p>

Flutter榛樿浼氬湪debug妯″紡涓嬪湪鍙充笂瑙掓樉绀烘按鍗帮紝鍘婚櫎鏂瑰紡锛?/p> 

debugShowCheckedModeBanner: false
3銆佽嚜瀹氫箟鎺т欢銆?/h5>

Flutter妗嗘灦缁欐垜浠彁渚涗簡StatelessWidget鍜孲tatefulWidget涓や釜鎶借薄绫伙紝鐢ㄤ簬鑷畾涔夋帶浠躲€?br /> 锛?锛?strong>StatelessWidget鏄?lsquo;‘鏃犵姸鎬佹帶浠?rsquo;’,涓嶅彲鍙樼姸鎬佹帶浠?閫氳繃鏋勫缓鍏朵粬鎺т欢鏉ユ弿杩扮敤鎴风晫闈㈢殑涓€閮ㄥ垎銆傚繀椤诲疄鐜癰uild鏂规硶锛岃繑鍥炰竴涓獁idget瀵硅薄銆?Icon銆?IconButton, 鍜孴ext绛夐兘鏄棤鐘舵€亀idget, 浠栦滑閮芥槸 StatelessWidget鐨勫瓙绫汇€?br /> 锛?锛?strong>StatefulWidget 鏄姩鎬佺殑. 鐢ㄦ埛鍙互鍜屽叾浜や簰 (渚嬪杈撳叆涓€涓〃鍗曘€?鎴栬€呯Щ鍔ㄤ竴涓猻lider婊戝潡),鎴栬€呭彲浠ラ殢鏃堕棿鏀瑰彉 (涔熻鏄暟鎹敼鍙樺鑷寸殑UI鏇存柊).Checkbox, Radio, Slider, Form, 鍜孴extField 閮芥槸 stateful widgets, 浠栦滑閮芥槸 StatefulWidget鐨勫瓙绫汇€?/p>

锛?锛?strong>鑷畾涔塛idget锛氱户鎵縎tatefulWidget锛屽苟閲嶅啓createState()鏂规硶锛岃繑鍥炰竴涓猄tate瀵硅薄銆?br /> 鑷畾涔夋棤鐘舵€佺殑widget锛?/p> 

class RedBoard extends StatelessWidget {
  const RedBoard({ Key key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new Container(
      color: Colors.red
    );
  }
}

鑷畾涔夊彲鍙樼姸鎬佺殑widget锛?/p> 

class RandomWords extends StatefulWidget {
  @override
  createState() => new RandomWordsState();
}

class RandomWordsState extends State<RandomWords> {
  @override
  Widget build(BuildContext context) {
    final wordPair = new WordPair.random();
    return (new Text(wordPair.asPascalCase));
  }
}

锛?锛?strong>缁ф壙鑷狢ustomPaint鐢绘帶浠?/strong>
Flutter涔熷彲浠ュ儚Android涓户鎵縑iew鐨勬柟寮忔潵缁樺埗鎺т欢锛岄€氳繃缁ф壙CustomPaint绫绘潵瀹炵幇锛屽叿浣撶敤娉曟澶勭暐銆?/p>

4銆乀extField鏍峰紡
decoration: new InputDecoration(
                  hintText: 鈥榠nput name to search鈥?span class="token punctuation">,
                  border: InputBorder.none
              )

鍘绘帀涓嬭竟妗嗐€?br /> 澶栭潰濂椾笂Container锛屽姞涓婅楗板疄鐜板洓闈㈣竟妗嗘晥鏋?/p> 

decoration: BoxDecoration(
                color: Colors.white,
                border: Border.all(color: Colors.green, width: 1.0),
                borderRadius: BorderRadius.circular(4)),

娉ㄦ剰锛?br /> 鍦╠ecoration涓姞浜哻olor灞炴€э紝鍦–ontainer涓氨涓嶈兘鍔燾olor灞炴€э紝鍚﹀垯浼氬嚭閿欍€?/p>

TextField鍧?/strong>锛?br /> 杞敭鐩榬esize绐楀彛锛岃В鍐虫柟寮忥細

In your `Scaffold`, set `resizeToAvoidBottomPadding` property to `false`.

preprefixIcon鍜宻uffixIcon濡傛灉浣跨敤绯荤粺鎻愪緵鐨剆vg璧勬簮锛岄渶瑕佹寚瀹氶鑹诧紝涓嶇劧鍦ㄨ幏鍙栫劍鐐规椂浼氬彉鎴愪笉鍙鐘舵€併€?/p>

5銆丩istView

ListView鐨勪娇鐢ㄥ彲浠ュ弬鑰冩鏂囷細https://blog.csdn.net/hao_m582/article/details/84112278

濡傛灉涓庡叾浠杦idget鏀惧湪鍚屼竴涓狢olumn涓紝ListView澶栧姞Expanded鎵嶈兘姝ｅ父鏄剧ず銆?/p>

鍙互鐢↙istView浣滀负婊氬姩鍧楋紝鐩稿綋浜巃ndroid涓殑ScrollView鏁堟灉锛屼絾鏄瓙view涓嶆槸鍐欏湪widget涓紝鑰屾槸鐩存帴鍐欏湪ListView鐨刢hildren灞炴€т腑锛屽锛?/p> 

//...
body: new ListView(
  children: [
    new Image.asset(
      鈥榠mages/lake.jpg鈥?span class="token punctuation">,
      width: 600.0,
      height: 240.0,
      fit: BoxFit.cover,
    ),
    titleSection,
    buttonSection,
    textSection,
  ],
),
//..
6銆佸姞杞藉浘鐗囦笌鎺т欢缂╂斁

闇€瑕佸湪pubspec.xml涓厤缃浘鐗囪矾寰勶紝鍙互鐪嬩笂娈典唬鐮佺墖娈点€?/p> 

  assets:
        - images/park.jpg
        - images/lake.jpg
        - images/touxiang.jpg

鍏朵腑images鏂囦欢澶规斁鍦ㄥ伐绋嬬殑鏍圭洰褰曘€傚姞杞藉浘鐗囧彲浠ョ洿鎺ヤ娇鐢ˋssertImage绫伙紝涔熷彲浠ヤ娇鐢↖mage.asset鏂规硶銆?br /> 缁忚繃鏌ユ壘锛宖lutter涓嶅畬鍏ㄦ敮鎸乻vg锛寈ml鏍煎紡鐨刅ectorDrawable鍦╢lutter涓婃棤娉曠洿鎺ュ姞杞?/em>
绫讳技Android涓璉mageView鐨剆caleType灞炴€э紝flutter鐨処mage鎺т欢涔熸湁鍏跺睘鎬oxfit锛岃€屼笖杩欎釜灞炴€т笉浠呬粎閫傜敤浜嶪mage鐩稿叧鐨刉idget锛孎ittedBox涔熷叿鏈夋灞炴€с€?br /> FittedBox浼氬湪鑷繁鐨勫昂瀵歌寖鍥村唴缂╂斁骞朵笖璋冩暣child浣嶇疆锛屼娇寰梒hild閫傚悎鍏跺昂瀵搞€?br /> 绀轰緥浠ｇ爜锛?/p> 

new Container(
  color: Colors.amberAccent,
  width: 300.0,
  height: 300.0,
  child: new FittedBox(
    fit: BoxFit.contain,
    alignment: Alignment.topLeft,
    child: new Container(
      color: Colors.red,
      child: new Text("FittedBox"),
    ),
  ),
)

鐪嬩竴涓嬪嚑绉嶇缉鏀炬柟寮忕殑鍖哄埆锛?/p>

 
鎶€鏈浘鐗? src=
image.png
7銆丗lutter鏋勫缓甯冨眬瀹炰緥

Flutter甯冨眬鏈哄埗鐨勬牳蹇冩槸Widget銆傚湪Flutter涓紝鍑犱箮鎵€鏈変笢瑗块兘鏄疻idget - 鐢氳嚦甯冨眬妯″瀷閮芥槸Widget銆備綘鍦‵lutter搴旂敤涓湅鍒扮殑鍥惧儚銆佸浘鏍囧拰鏂囨湰閮芥槸widget銆?鐢氳嚦浣犵湅涓嶅埌鐨勪笢瑗夸篃鏄痺idget锛屼緥濡傝锛坮ow锛夈€佸垪锛坈olumn锛変互鍙婄敤鏉ユ帓鍒椼€佺害鏉熷拰瀵归綈杩欎簺鍙widget鐨勭綉鏍硷紙grid锛夈€?/p>

鏌ョ湅Flutter涓枃缃戠殑鏁欑▼锛?a href="https://flutterchina.club/tutorials/layout/" rel="nofollow" target="_blank">鍦‵lutter涓瀯寤哄竷灞€

甯哥敤Widget锛?br /> 锛?锛塁olumn鍜孯ow鐩稿浜嶢ndroid涓殑LinearLayout锛孋olumn鐩稿浜嶰rientation.Vertical锛汻ow鐩稿綋浜嶰rientation.Horizontal銆?/p>

锛?锛塋istView 锛孏ridView涓嶢ndroid涓殑鍚屽悕鎺т欢鏁堟灉绛夊悓

 

ListTitle鏄疐lutter灏佽濂界殑鍦ㄥ垪琛ㄤ腑鏄剧ず鐨刬tem鎺т欢锛屼粬鏈夊浐瀹氱殑鏄剧ず鏍煎紡锛屽涓嬶細
 
鎶€鏈浘鐗? src=
ListTitle.jpg

锛?锛塖tack鐩稿綋浜嶢ndroid涓殑FrameLayout锛屼絾鏄畠鍙堝叿鏈塕elativeLayout鐨勪竴浜涘睘鎬с€?/p>

锛?锛塁ard鐩稿綋浜嶢ndroid涓殑CardView

锛?锛変簨浠跺搷搴旓細Flutter骞堕潪涓烘墍鏈塛idget閮界洿鎺ユ彁渚涗簡鐐瑰嚮锛岄暱鎸夌瓑浜嬩欢鍝嶅簲锛岃繖鏃舵垜浠渶瑕佺敤 GestureDetector杩欎釜widget鍖呰９闇€瑕佸搷搴斾簨浠剁殑widget鏉ュ疄鐜板姛鑳姐€?br /> GestureDetector鎻愪緵浜嗗涓嬫墜鍔匡細
  Tap
  onTapDown 鎸囬拡宸茬粡鍦ㄧ壒瀹氫綅缃笌灞忓箷鎺ヨЕ
  onTapUp 鎸囬拡鍋滄鍦ㄧ壒瀹氫綅缃笌灞忓箷鎺ヨЕ
  onTap tap浜嬩欢瑙﹀彂
  onTapCancel 鍏堝墠鎸囬拡瑙﹀彂鐨刼nTapDown涓嶄細鍦ㄨЕ鍙憈ap浜嬩欢
  鍙屽嚮
  onDoubleTap 鐢ㄦ埛蹇€熻繛缁袱娆″湪鍚屼竴浣嶇疆杞绘暡灞忓箷.
  闀挎寜
  onLongPress 鎸囬拡鍦ㄧ浉鍚屼綅缃暱鏃堕棿淇濇寔涓庡睆骞曟帴瑙?br />   鍨傜洿鎷栧姩
  onVerticalDragStart 鎸囬拡宸茬粡涓庡睆骞曟帴瑙﹀苟鍙兘寮€濮嬪瀭鐩寸Щ鍔?br />   onVerticalDragUpdate 鎸囬拡涓庡睆骞曟帴瑙﹀苟宸叉部鍨傜洿鏂瑰悜绉诲姩.
  onVerticalDragEnd 鍏堝墠涓庡睆骞曟帴瑙﹀苟鍨傜洿绉诲姩鐨勬寚閽堜笉鍐嶄笌灞忓箷鎺ヨЕ锛屽苟涓斿湪鍋滄鎺ヨЕ灞忓箷鏃朵互鐗瑰畾閫熷害绉诲姩
  姘村钩鎷栧姩
  onHorizontalDragStart 鎸囬拡宸茬粡鎺ヨЕ鍒板睆骞曞苟鍙兘寮€濮嬫按骞崇Щ鍔?br />   onHorizontalDragUpdate 鎸囬拡涓庡睆骞曟帴瑙﹀苟宸叉部姘村钩鏂瑰悜绉诲姩
  onHorizontalDragEnd 鍏堝墠涓庡睆骞曟帴瑙﹀苟姘村钩绉诲姩鐨勬寚閽堜笉鍐嶄笌灞忓箷鎺ヨЕ锛屽苟鍦ㄥ仠姝㈡帴瑙﹀睆骞曟椂浠ョ壒瀹氶€熷害绉诲姩銆?/p>

锛?锛塀utton锛欶lutter鎻愪緵浜嗗嚑绉嶆牱寮忕殑鎸夐挳锛屽垎鍒负锛?br />   FlatButton锛氭墎骞崇殑锛屾病鏈夐槾褰辨晥鏋滅殑銆?br />   RaisedButton锛氭湁闃村奖鏁堟灉鐨勩€?br />   FloatingActionButton锛氭偓娴寜閽紝绫讳技Android涓婂悓鍚嶇殑鎺т欢銆?br />   OutlineButton锛氱嚎妗嗘寜閽紝甯﹀杈规鐨勬寜閽€?/p>

锛?锛塃xpanded銆丗lexible锛欵xpanded 杩欐槸涓敤鏉ヨ瀛愰」鍏锋湁浼哥缉鑳藉姏鐨剋idget锛岀户鎵胯嚜Flexible銆傚畠浠袱涓殑榛樿鐏垫椿绯绘暟鏄竴鏍风殑锛屼絾鏄痜it鍙傛暟涓嶅悓锛孍xpanded鏄粯璁よ鍗犳弧鍒嗛厤鐨勭┖闂寸殑锛岃€孎lexible鍒欓粯璁や笉闇€瑕併€?/p>

锛?锛塕ipple鏁堟灉锛欶lutter涓枃缃戝皢InkWell缈昏瘧鎴?ldquo;澧ㄦ按椋炴簠”鏁堟灉锛屽叾瀹炵湅鍒版晥鏋滃悗锛屾垜浠┈涓婂氨鑳借仈鎯冲埌Android涓殑ripple鏁堟灉銆?/p>

 
鎶€鏈浘鐗? src=
inkwell.gif

鐢ㄦ硶涔熸槸鐢↖nkWell濂楄捣鎯宠杈惧埌鏁堟灉鐨剋idget锛屽叿浣撳睘鎬ф煡鐪嬫簮鐮佹敞閲娿€?/p>

涓嬮潰鐢ㄤ竴涓叿浣撶殑渚嬪瓙浠嬬粛甯冨眬鍜屽叾浠栧彲鑳界敤鍒扮殑Widget锛?/strong>

 
鎶€鏈浘鐗? src=
鑱婂ぉ.png

 

涓婂浘鏄父瑙佺殑鑱婂ぉ鍒楄〃鏍峰紡锛岄鍏堟垜浠兘鎯冲埌鐨勬槸鏁翠釜鐣岄潰鏄竴涓狶istView锛屾牴鎹被鍨嬫湁宸﹁竟鍜屽彸杈逛袱绉嶆牱寮忋€傜敱浜巉lutter娌℃湁xml甯冨眬锛屾墍鏈夌晫闈㈤兘鏄€氳繃widget鎼Н鏈ㄤ竴鏍凤紝涓€灞備竴灞傚璧锋潵鐨勩€?/p>

宸︿晶鐨勬樉绀猴細鏈€澶栧眰搴旇鏄竴涓猂ow锛孯ow涓寘鍚簡涓€涓狢ircleAvatar锛堟病閿欙紝杩欎釜Widget瀹樻柟鐩存帴鎻愪緵浜嗭級鍜屼竴涓猅ext銆?br /> 鎬庢牱鎺у埗Text鐨勮儗鏅牱寮忥細
棣栧厛鎯冲埌鐨勫氨鏄灞傚涓€涓彲浠ヨ缃牱寮忕殑Container锛岄€氳繃缁機ontainer鍔犱竴涓猟ecoration灞炴€э紝涓€鑸娇鐢˙oxDecoration锛屽彲浠ヤ负Container璁剧疆鑳屾櫙棰滆壊锛屽墠鏅鑹诧紝杈规锛屽渾瑙掞紝鍥剧墖绛夎兘婊¤冻澶ч儴鍒嗗満鏅殑鏍峰紡銆?br /> 闂鍑虹幇浜?/strong>

 
鎶€鏈浘鐗? src=
image.jpg

Text鏈韩鏄敮鎸佹枃瀛楄嚜鍔ㄦ崲琛岀殑锛孋ontainer鏈韩濡傛灉娌℃湁鐖舵帶浠堕檺鍒朵篃鏄寘瑁圭殑锛屼絾鍥犱负澶栭潰鏀句簡涓€涓猂ow锛屽氨浼氬嚭鐜版孩鍑哄睆骞曠殑闂銆傜粡杩囧鐣煡鎵撅紝鎴戞壘鍒颁簡涓€涓猈idget鍙互瑙ｅ喅闂——Flexible锛屽湪Container澶栭潰濂椾竴涓狥lexible灏辫兘瑙ｅ喅闂锛屾鏃堕渶瑕佹敞鎰忕殑鏄紝Flexible锛孍xpanded绛夊彲浠ヨ嚜閫傚簲鐨勭户鎵夸簡Flex鐨勬帶浠讹紝鍏剁埗鎺т欢涔熷繀椤绘槸鍚岀被鍨嬨€?

 

鎺ヤ笅鏉ユ垜浠鎺у埗鏂囧瓧鐨勬渶闀挎樉绀哄搴︼紝Container鏈変竴涓睘鎬ф槸constraints锛屽畠鐨勭被鍨嬫槸BoxConstraints锛岃繖涓猈idget鍙互璁剧疆鏈€灏忔渶澶у楂橈紝涓嶉檺鍒剁殑璇濆氨鐢╠ouble.infinity(鏃犻檺)銆傚湪缁忚繃闄愬埗鍚庯紝鎴戜滑鍙戠幇Flexible宸茬粡涓嶉渶瑕佷簡锛屽洜涓哄搴﹀凡缁忛檺鍒朵綇浜?.=|||銆?/p> 

//鑾峰彇灞忓箷瀹藉害鐨勬柟娉?
double width = MediaQuery.of(context).size.width;

鎺ヤ笅鏉ユ垜浠寜鐓ndroid涓殑鐞嗚В锛屾樉绀哄彸渚уご鍍忕殑娑堟伅锛屽氨鍦≧ow涓厛鍔犲叆涓€涓猅ext锛屽啀鍔犲叆涓€涓狢ircleAvatar銆傛病閿欙紝浣嗘槸鎬庢牱灞呭彸鏄剧ず鍛紵缁忚繃鏌ヨ璧勬枡鍙戠幇锛孯ow閫氳繃textDirection灞炴€у彲浠ヨ缃柟鍚戯紝鎴戜滑灏嗗睘鎬ц缃垚TextDirection.rtl锛屼篃灏辨槸rightToLeft锛屽彂鐜板挦锛熸€庝箞澶村儚璺戝埌鍓嶉潰鍘讳簡锛熼偅鎴戜滑鍐嶆妸澶村儚浠ｇ爜绉诲埌鍓嶉潰锛岀珶鐒跺浜嗐€傘€備篃灏辫鏄庯紝Row鐨勭粯鍒舵祦绋嬮兘鏄牴鎹甤hildren涓渶鍏堝姞鍏ョ殑瀛恮idget鏉ョ粯鍒剁殑銆?/p>

杈撳叆妗嗗疄鐜帮細
杈撳叆妗嗛鍏堣淇濇寔鍦ㄧ晫闈㈠簳閮紝鎬庝箞瀹炵幇鍛紵浜嗚В鍒板畼鏂规彁渚涗簡涓€涓狟ottomAppBar锛屽皢鍏惰缃粰Scaffold涓殑bottomNavigationBar灞炴€с€侭ottomAppBar鐨刢hild缁欏埌涓€涓猂ow鎺т欢锛屾帓鍒楄闊虫寜閽甀conButton锛岃緭鍏ユTextField锛屾洿澶氭寜閽甀conButton銆俆extField澶栭儴瑕佸祵濂椾竴涓狢ontainer淇グ鏍峰紡銆傝繍琛屽悗鍙戠幇鏁翠釜鐣岄潰閮芥棤娉曟樉绀猴紝鑰屾敞閲婃帀TextField灏卞彲浠ユ樉绀猴紝鐢辨鎯冲埌搴旇鏄疶extField鐨勫搴︿笉姝ｅ父瀵艰嚧鐨勶紝浣跨敤涓囪兘鎺т欢Flexible濂楀湪TextField鐨勭埗绾ontainer澶栧悗鏄剧ず姝ｅ父銆?br /> 鎺ヤ笅鏉ヨ瘯璇曡緭鍏ユ枃瀛楋紝鍙堝嚭鐜板潙浜?/strong>锛丅ottomAppBar鍦ㄨ緭鍏ユ硶寮瑰嚭鏃舵棤娉曡嚜鍔ㄤ笂绉伙紝纭畾浜唕esizeToAvoidBottomPadding璁剧疆涓簍rue鐨勬儏鍐典緷鐒舵棤娉曡В鍐抽棶棰樺悗锛屽彧濂芥壘鍏朵粬鏂瑰紡銆傚湪stackoverflow涓婃壘鍒颁簡鍙︿竴绉嶆柟妗堬細灏嗘渶涓嬮潰鐨勮緭鍏ュ竷灞€杩炲悓ListView閮芥斁鍏caffold鐨刡ody涓紝ListView澶栧姞涓奅xpanded浼哥缉锛屾渶澶栧眰涓€涓狢ontainer鍖呰９锛岃繍琛屽畬缇庯紝浠ｇ爜濡備笅锛?/p> 

 @override
  Widget build(BuildContext context) {
    _getConversations();
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(mIsGroup
            ? mConversation.groupBean.groupName
            : mConversation.contactBean.nickName != null
                ? mConversation.contactBean.nickName
                : mConversation.contactBean.pin),
        elevation: 0.5,
        actions: <Widget>[
          new IconButton(
              icon: new Icon(
                mIsGroup ? Icons.group : Icons.person,
                size: 24,
                color: Colors.black54,
              ),
              onPressed: _goContactInfo),
        ],
      ),
      body: new Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          new Expanded(
            child: _buildConversations(),
          ),
          Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              IconButton(icon: Icon(Icons.keyboard_voice), onPressed: null),
              Flexible(
                child: Container(
                    height: 40,
                    margin: EdgeInsets.fromLTRB(10, 6, 10, 6),
                    padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      border: Border.all(
                        color: Colors.black12,
                        width: 0.5,
                        style: BorderStyle.solid,
                      ),
                      borderRadius: BorderRadius.circular(4),
                    ),
                    child: TextField(
                      decoration: InputDecoration(
                          hintText: 鈥樿緭鍏ュ唴瀹光€?span class="token punctuation">, border: InputBorder.none),
                    )),
              ),
              Container(
                margin: EdgeInsets.fromLTRB(0, 0, 10, 0),
                child: IconButton(icon: Icon(Icons.add_circle_outline),onPressed: null,),
              )
            ],
          ),
        ],
      ),
    );
  }

鍒版锛屽氨瀹炵幇浜嗗浘涓墍绀烘晥鏋溿€?br /> 涓嬮潰鏄痠tem鐨勫竷灞€浠ｇ爜锛?/p> 

Widget _msgHolder(MessageBean message, BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    double _maxWidth = width * 0.65;
    return Row(
      textDirection: message.from.pin == myInfo.pin?TextDirection.rtl:TextDirection.ltr,
      children: <Widget>[
        CircleAvatar(
          backgroundImage: AssetImage(message.from.avatarUrl == null
              ? "assets/drawable/ava_group.png"
              : message.from.avatarUrl),
        ),
        GestureDetector(
            onLongPress: () {
              _showList(options);
            },
            child: Container(
              constraints: BoxConstraints(
                  minWidth: 0,
                  maxWidth: _maxWidth,
                  minHeight: 0,
                  maxHeight: double.infinity),
              margin: EdgeInsets.fromLTRB(10, 5, 5, 10),
              padding: EdgeInsets.all(8),
              decoration: BoxDecoration(
                color: Colors.green,
                border: Border.all(
                  color: Colors.green,
                  width: 0.5,
                  style: BorderStyle.solid,
                ),
                borderRadius: BorderRadius.circular(4),
              ),
              child: Text(
                _getMessage(message),
                style: TextStyle(color: Colors.white, fontSize: 16),
              ),
            )),
      ],
    );
  }

Widget鐨勬樉绀轰笌闅愯棌
Flutter鐭ヨ瘑鐐? Widget闅愯棌涓庢樉绀?/a>

8銆乀oast鍜孌ialog

鍦ㄨ亰澶╀腑锛屽父瑙佹搷浣滄槸闀挎寜娑堟伅锛屽脊鍑轰竴涓叿鏈夐€夐」鐨凞ialog锛岄偅涔堝湪Flutter涓浣曟樉绀哄父瑙佺殑Toast鍜孌ialog鍛紵
鐢变簬Flutter鎻愪緵缁欏畨鍗撶殑澶ч儴鍒哤idget閮芥槸鍩轰簬Material璁捐鐨勶紝鎵€浠lutter骞舵病鏈夋彁渚汿oast鎺т欢锛岃€屾槸鎻愪緵浜?strong>SnackBar銆?/p> 

//SnackBar鐨勬樉绀?
Scaffold.of(context).showSnackBar(SnackBar(
     content: Text("闀挎寜娑堟伅"),
));

SnackBar涓嶆鑳藉鏄剧ずText锛岃繕鍙互浠绘剰鍔犲叆widget銆?br /> 姝ゅ鏈夊潙锛?/strong>
鍏充簬涓婃浠ｇ爜涓殑context锛圔uildContext锛夛紝浣犲湪浠讳綍鏂规硶閲岄兘鍙互鍙栧埌context锛屼絾鏄繍琛岃捣鏉ュ緢鍙兘浼氶亣鍒癱ontext涓簄ull鐨勬儏鍐碉紝閭ｄ箞灏遍渶瑕佷紶鍏ヤ竴涓粡杩囦簡瀹炰緥鍖栫殑BuildContext銆傛瘮濡係caffold涓垨鑰匧istView.builder涓殑context锛屼紶缁橲nackBar鍗冲彲銆?/p>

Dialog锛?/strong>
Flutter涓篈ndroid鎻愪緵浜咲ialog锛孉lertDialog锛孲impleDialog涓夌甯哥敤瀵硅瘽妗嗐€傛兂瑕佸疄鐜版垜浠殑闇€姹傜敤SimpleDialog鍒氬悎閫傦紝鏁堟灉濡備笅锛?br />

 
鎶€鏈浘鐗? src=
寮圭獥.jpg

 

showDialog<int>(
        context: context,
        builder: (BuildContext context) {
          return new SimpleDialog(
            children: options.map((value) {
              return new SimpleDialogOption(
                onPressed: () {
                  Navigator.pop(
                      context,
                      options.indexOf(
                          value)); //here passing the index to be return on item selection
                },
                child: new Text(
                  value,
                  style: TextStyle(
                    fontSize: 16,
                  ),
                ), //item value
              );
            }).toList(),
          );
        })
9銆佹暟鎹瓨鍌?/h5>

Flutter鐭ヨ瘑鐐?鏁版嵁瀛樺偍涔婼haredPreferences
Flutter鐭ヨ瘑鐐?鏁版嵁瀛樺偍涔婩ile
Flutter鐭ヨ瘑鐐?鏁版嵁瀛樺偍涔媠qflite
瀹樼綉sqflite椤甸潰
涓嬮潰鐨勫瓧娈典笉鑳界敤浜庤〃鐨勫睘鎬у悕绉?/p> 

"add","all","alter","and","as","autoincrement","between","case","check","collate","commit","constraint","create","default","deferrable","delete","distinct","drop","else","escape","except","exists","foreign","from","group","having","if","in","index","insert","intersect","into","is","isnull","join","limit","not","notnull","null","on","or","order","primary","references","select","set","table","then","to","transaction","union","unique","update","using","values","when","where"
10銆丗lutter甯哥敤鎻掍欢
  audio_recorder: any #褰曢煶銆佹挱鏀?
  flutter_sound: ^1.1.5#褰曢煶
  dropdown_menu: ^1.1.0#涓嬫媺鑿滃崟
  simple_permissions:#鏉冮檺鑾峰彇
  easy_alert:#寮规
  amap_location: any #楂樺痉鍦板浘
  location: any #gogle浣嶇疆鑾峰彇
  barcode_scan 0.0.8#浜岀淮鐮佽瘑鍒玵r_mobile_vision: ^0.1.0 #浜岀淮鐮佽瘑鍒?杩欎釜涓嶅ソ鐢?
  flutter_screenutil: ^0.3.0#灞忓箷閫傞厤宸ュ叿绫? 
  flutter_spinkit: ^2.1.0#鍔犺浇绛夊緟妗?
  lpinyin: ^1.0.6#姹夊瓧杞嫾闊?
  shimmer: ^0.0.4#寰厜鏁堟灉鎺т欢
  qr_flutter: ^1.1.3#浜岀淮鐮佺敓鎴?
  url_launcher: any#鍚姩URL鐨凢lutter鎻掍欢銆傛敮鎸佺綉缁滐紝鐢佃瘽锛岀煭淇″拰鐢靛瓙閭欢
  datetime_picker_formfield: ^0.1.3#鏃堕棿閫夋嫨鎺т欢
  flutter_picker: 鈥榐1.0.0鈥?閫夋嫨鍣?
  common_utils: 鈥榐1.0.1鈥?宸ュ叿绫?鏃堕棿銆佹棩鏈熴€佹棩蹇楃瓑
  flutter_html: 鈥榐0.8.2鈥?闈欐€乭tml鏍囪鍛堢幇涓篎lutter灏忛儴浠?
  fluwx: 鈥榐0.3.0鈥?寰俊鏀粯銆佸垎浜€佺櫥褰?
  tobias: 鈥榐 0.0.6#鏀粯瀹?
  cupertino_icons: 鈥榐0.1.2鈥?灏忓浘鏍囨帶浠?
  http: 鈥榐0.11.3+16鈥?缃戠粶璇锋眰
  html: 鈥榐0.13.3鈥?html瑙ｆ瀽
  image_picker: 鈥榐0.4.5鈥?鍥剧墖閫夋嫨锛堢浉鍐屾垨鎷嶇収锛?
  flutter_webview_plugin: any#webview灞曠ず
  fluttertoast: any#toast鎻愮ず妗?
  shared_preferences: 鈥榐0.4.2鈥?shared_preferences瀛樺偍
  transparent_image: 鈥榐0.1.0鈥?閫忔槑鍥剧墖鎺т欢
  flutter_swiper : 鈥榐1.0.2鈥?杞挱鍥?
  charts_flutter: 鈥榐0.4.0鈥?缁熻鍥捐〃
  path_provider: 鈥榐0.4.1鈥?鑾峰彇绯荤粺鏂囦欢
  cached_network_image: 鈥?.4.1鈥?鍔犺浇缃戠粶鍥剧墖骞舵湰鍦扮紦瀛?
  sqflite: 鈥榐0.11.0+1鈥?sqllite鏁版嵁搴撴搷浣?
  pull_to_refresh: 鈥榐1.1.5鈥?涓嬫媺鍒锋柊涓婃媺鍔犺浇鏇村
  video_player: 鈥?.6.1鈥?瑙嗛鎾斁
  collection: 鈥?.14.11鈥?闆嗗悎鎿嶄綔宸ュ叿绫?
  device_info: 鈥?.2.1鈥?鑾峰彇鎵嬫満淇℃伅
  flutter_svg: 鈥榐0.3.2鈥?灞曠ずsvg鍥炬爣鎺т欢
  intl: any#鍥介檯鍖栧伐鍏风被
  connectivity: 鈥?.3.1鈥?閾炬帴缃戠粶
  flutter_staggered_grid_view:#鐎戝竷娴佸睍绀烘帶浠?
  flutter_file_manager:#鏂囦欢绠＄悊
  loader_search_bar:#瀵艰埅鏍忔悳绱㈡帶浠?
  flutter_image_compress : any#鍥剧墖鍘嬬缉
  ota_update : any#App涓嬭浇鏇存柊
  flutter_slidable锛?item渚ф粦鎺т欢

 

 

以上是关于Flutter鍏ラ棬鍩虹的主要内容，如果未能解决你的问题，请参考以下文章

Java鍏ラ棬(鍩虹绡囦竴)

鍟嗕笟鏁版嵁鍒嗘瀽鍜屽彲瑙嗗寲BI锛岄浂鍩虹鍏ラ棬闇€瑕佸涔咃紵

webpack鍏ラ棬-涓汉瀛︿範璧勬簮鏀堕泦

鍊嶅鍏ラ棬

mybatis鍏ラ棬

JavaPoet鍏ラ棬