Flutter之編寫公共Widget
阿新 • • 發佈:2020-12-12
如上圖,做一個抽取
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class RowWidget extends Widget{ @override Element createElement() { return Container( width: double.infinity,//充滿螢幕 height: 50.0, padding: EdgeInsets.only(left:16.0,top:14.0,right:16.0,bottom:14.0),//內邊距,可以一個或者多個使用 .all color: Colors.white, alignment: Alignment(0,0), child: Row(//就是打個樣 children: <Widget>[ new Image(image: AssetImage("assets/images/check_update.png"),width: 42.0,height: 42.0), new Container(child:new Text("檢查更新",style: TextStyle(color:Colors.black,fontSize: 16.0,)), margin: const EdgeInsets.only(left: 6.0),), new Container(child: new Text("當前版本",style:TextStyle(color:Colors.grey,fontSize: 14.0)), margin: const EdgeInsets.only(left:120.0),), new Container(child:new Image(image:AssetImage("assets/images/right_arrow.png"),width: 8.0,height: 12.0), margin: const EdgeInsets.only(left: 22.0),) ], )).createElement(); } }
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_weight_ui/row_widget.dart'; class SettingPage extends StatelessWidget{ @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( centerTitle: true, titleSpacing: 6.0, title: Text("設定",style: TextStyle(color:Colors.white,fontSize: 18.0,fontWeight: FontWeight.w400)), leading: new IconButton(icon: const Icon(Icons.arrow_back), onPressed: (){Navigator.of(context).pop();}), ), body: Column( children: <Widget>[ RowWidget(), Container( child: Divider(height: 1.0,indent: double.infinity-36.0,color: Colors.grey,), margin: const EdgeInsets.only(left:36.0), ), RowWidget(), Container( child: Divider(height: 1.0,indent: double.infinity-36.0,color: Colors.grey,), margin: const EdgeInsets.only(left:36.0), ), RowWidget(), Container( child: Divider(height: 1.0,indent: double.infinity-36.0,color: Colors.grey,), margin: const EdgeInsets.only(left:36.0), ), RowWidget(), Container( child: Divider(height: 1.0,indent: double.infinity-36.0,color: Colors.grey,), margin: const EdgeInsets.only(left:36.0), ), ], ), ); } }