Flutter 新聞客戶端 - 13 使用 supernova、imgcook 導入 sketch psd xd 自動生成代碼
B站視頻
www.bilibili.com/video/BV1t5…ios
本節目標
- 瞭解 supernova 代碼生成器做用
- 導入 xd 設計稿
- 如何高效使用生成代碼
正文
代碼生成器
有潛力加入代碼生成功能
supernova 代碼生成器
導入 xd 設計稿，生成代碼
商業設計稿很差直接分享, 能夠加微信聯繫 ducafecatgithub
編寫用戶中心界面代碼
組織代碼結構
class _AccountPageState extends State<AccountPage> {
// 我的頁面 頭部
Widget _buildUserHeader() {}
// 列表項
Widget _buildCell() {}
@override
Widget build(BuildContext context) {
final appState = Provider.of<AppState>(context);
return SingleChildScrollView(
child: Column(
children: <Widget>[
_buildUserHeader(),
_buildCell(),
],
),
);
}
}
複製代碼
直接使用生成的代碼
- 我的頁面 頭部
Widget _buildUserHeader() {
return Container(
height: 333,
child: Stack(
alignment: Alignment.center,
children: [
Positioned(
left: 0,
right: 0,
child: Container(
height: 333,
decoration: BoxDecoration(
color: AppColors.primaryBackground,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
height: 2,
decoration: BoxDecoration(
color: AppColors.primaryElement,
),
child: Container(),
),
],
),
),
),
Positioned(
left: 20,
top: 40,
right: 20,
bottom: 21,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
height: 198,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Align(
alignment: Alignment.topCenter,
child: Container(
width: 108,
height: 108,
child: Stack(
alignment: Alignment.center,
children: [
Positioned(
top: 0,
child: Container(
width: 108,
height: 108,
decoration: BoxDecoration(
color: AppColors.primaryBackground,
boxShadow: [
Shadows.primaryShadow,
],
borderRadius: Radii.k54pxRadius,
),
child: Container(),
),
),
Positioned(
top: 10,
child: Image.asset(
"assets/images/image.png",
fit: BoxFit.none,
),
),
],
),
),
),
Spacer(),
Container(
margin: EdgeInsets.only(bottom: 9),
child: Text(
"Cameron Rogers",
textAlign: TextAlign.center,
style: TextStyle(
color: AppColors.primaryText,
fontFamily: "Montserrat",
fontWeight: FontWeight.w400,
fontSize: 24,
),
),
),
Text(
"@boltrogers",
textAlign: TextAlign.center,
style: TextStyle(
color: AppColors.primaryText,
fontFamily: "Avenir",
fontWeight: FontWeight.w400,
fontSize: 16,
),
),
],
),
),
Spacer(),
Container(
height: 44,
child: FlatButton(
onPressed: () => this.onButtonPressed(context),
color: Color.fromARGB(255, 41, 103, 255),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(6)),
),
textColor: Color.fromARGB(255, 255, 255, 255),
padding: EdgeInsets.all(0),
child: Text(
"Get Premium - \$9.99",
textAlign: TextAlign.center,
style: TextStyle(
color: AppColors.secondaryText,
fontFamily: "Montserrat",
fontWeight: FontWeight.w400,
fontSize: 18,
),
),
),
),
],
),
),
],
),
);
}
複製代碼
- 列表項
Widget _buildCell() {
return Container(
height: 60,
child: Stack(
alignment: Alignment.centerLeft,
children: [
Positioned(
left: 0,
right: 0,
child: Container(
height: 60,
decoration: BoxDecoration(
color: AppColors.secondaryElement,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
height: 1,
decoration: BoxDecoration(
color: AppColors.primaryElement,
),
child: Container(),
),
],
),
),
),
Positioned(
right: 0,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
margin: EdgeInsets.only(right: 11),
child: Text(
"12",
textAlign: TextAlign.right,
style: TextStyle(
color: AppColors.primaryText,
fontFamily: "Avenir",
fontWeight: FontWeight.w400,
fontSize: 18,
),
),
),
Container(
width: 24,
height: 24,
margin: EdgeInsets.only(right: 20),
child: Image.asset(
"assets/images/icon.png",
fit: BoxFit.none,
),
),
],
),
),
Positioned(
left: 0,
child: Stack(
alignment: Alignment.center,
children: [
Positioned(
left: 0,
right: 19,
child: Container(),
),
Positioned(
left: 20,
right: 0,
child: Text(
"Favorite channels",
textAlign: TextAlign.left,
style: TextStyle(
color: AppColors.primaryText,
fontFamily: "Montserrat",
fontWeight: FontWeight.w400,
fontSize: 18,
),
),
),
],
),
),
],
),
);
}
複製代碼
抽取代碼 lib/common/widgets/app.dart
/// 10像素 Divider
Widget divider10Px({Color bgColor = AppColors.secondaryElement}) {
return Container(
height: duSetWidth(10),
decoration: BoxDecoration(
color: bgColor,
),
);
}
複製代碼
修改代碼 _buildUserHeader
// 我的頁面 頭部
Widget _buildUserHeader() {
return Container(
height: duSetWidth(333),
child: Stack(
alignment: Alignment.center,
children: [
// 背景
Positioned(
left: 0,
right: 0,
child: Container(
height: duSetWidth(333),
decoration: BoxDecoration(
color: AppColors.primaryBackground,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
height: duSetWidth(2),
decoration: BoxDecoration(
color: AppColors.tabCellSeparator,
),
child: Container(),
),
],
),
),
),
Positioned(
left: 20,
top: 40,
right: 20,
bottom: 21,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// 頭像
Container(
height: duSetWidth(198),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Align(
alignment: Alignment.topCenter,
child: Container(
width: duSetWidth(108),
height: duSetWidth(108),
child: Stack(
alignment: Alignment.center,
children: [
Positioned(
top: 0,
child: Container(
width: duSetWidth(108),
height: duSetWidth(108),
decoration: BoxDecoration(
color: AppColors.primaryBackground,
boxShadow: [
Shadows.primaryShadow,
],
borderRadius: BorderRadius.all(
Radius.circular(duSetWidth(108) / 2)),
),
child: Container(),
),
),
Positioned(
top: 10,
child: Image.asset(
"assets/images/account_header.png",
height: duSetWidth(88),
width: duSetWidth(88),
fit: BoxFit.fill,
),
),
],
),
),
),
// 文字
Spacer(),
Container(
margin: EdgeInsets.only(bottom: 9),
child: Text(
Global.profile.displayName,
textAlign: TextAlign.center,
style: TextStyle(
color: AppColors.primaryText,
fontFamily: "Montserrat",
fontWeight: FontWeight.w400,
fontSize: 24,
),
),
),
Text(
"@boltrogers",
textAlign: TextAlign.center,
style: TextStyle(
color: AppColors.primaryText,
fontFamily: "Avenir",
fontWeight: FontWeight.w400,
fontSize: 16,
),
),
],
),
),
// 按鈕
Spacer(),
Container(
height: 44,
child: FlatButton(
onPressed: () => {},
color: Color.fromARGB(255, 41, 103, 255),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(6)),
),
textColor: Color.fromARGB(255, 255, 255, 255),
padding: EdgeInsets.all(0),
child: Text(
"Get Premium - \$9.99",
textAlign: TextAlign.center,
style: TextStyle(
color: AppColors.primaryElementText,
fontFamily: "Montserrat",
fontWeight: FontWeight.w400,
fontSize: 18,
),
),
),
),
],
),
),
],
),
);
}
複製代碼
修改代碼 _buildCell
// 列表項
Widget _buildCell({
String title,
String subTitle,
int number,
bool hasArrow = false,
VoidCallback onTap,
}) {
return GestureDetector(
onTap: onTap,
child: Container(
height: duSetWidth(60),
color: Colors.white,
child: Stack(
alignment: Alignment.centerLeft,
children: [
// 背景
Positioned(
left: 0,
right: 0,
child: Container(
height: duSetWidth(60),
decoration: BoxDecoration(
color: AppColors.primaryBackground,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
height: duSetWidth(1),
decoration: BoxDecoration(
color: AppColors.tabCellSeparator,
),
child: Container(),
),
],
),
),
),
// 右側
Positioned(
right: 0,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
// 數字
number == null
? Container()
: Container(
margin: EdgeInsets.only(right: 11),
child: Text(
number.toString(),
textAlign: TextAlign.right,
style: TextStyle(
color: AppColors.primaryText,
fontFamily: "Avenir",
fontWeight: FontWeight.w400,
fontSize: duSetFontSize(18),
),
),
),
// 箭頭
hasArrow == false
? Container()
: Container(
width: duSetWidth(24),
height: duSetWidth(24),
margin: EdgeInsets.only(right: 20),
child: Icon(
Icons.arrow_forward_ios,
color: AppColors.primaryText,
),
),
],
),
),
// 標題
title == null
? Container()
: Positioned(
left: 20,
child: Text(
title,
textAlign: TextAlign.left,
style: TextStyle(
color: AppColors.primaryText,
fontFamily: "Montserrat",
fontWeight: FontWeight.w400,
fontSize: duSetFontSize(18),
),
),
),
// 子標題
subTitle == null
? Container()
: Positioned(
right: 20,
child: Text(
subTitle,
textAlign: TextAlign.left,
style: TextStyle(
color: AppColors.primaryText,
fontFamily: "Montserrat",
fontWeight: FontWeight.w400,
fontSize: duSetFontSize(18),
),
),
),
],
),
),
);
}
複製代碼
修改代碼 build
@override
Widget build(BuildContext context) {
final appState = Provider.of<AppState>(context);
return SingleChildScrollView(
child: Column(
children: <Widget>[
_buildUserHeader(),
divider10Px(),
_buildCell(
title: "Email",
subTitle: "boltrogers@gmail.com",
),
divider10Px(),
_buildCell(
title: "Favorite channels",
number: 12,
hasArrow: true,
),
_buildCell(
title: "Bookmarks",
number: 294,
hasArrow: true,
),
_buildCell(
title: "Popular categories",
number: 7,
hasArrow: true,
),
divider10Px(),
_buildCell(
title: "Newsletter",
hasArrow: true,
),
_buildCell(
title: "Settings",
hasArrow: true,
),
divider10Px(),
_buildCell(
title: "Switch Gray Filter",
hasArrow: true,
onTap: () => appState.switchGrayFilter(),
),
_buildCell(
title: "Log out",
hasArrow: true,
onTap: () => goLoginPage(context),
),
divider10Px(),
],
),
);
}
複製代碼
技巧
- vscode 固定代碼
總結
資源
設計稿藍湖預覽
lanhuapp.com/url/lYuz1 密碼: gSKl微信
藍湖如今收費了，因此查看標記還請本身上傳 xd 設計稿 商業設計稿文件很差直接分享, 能夠加微信聯繫 ducafecatmarkdown
代碼
相關文章
- 1. sketch一鍵生成多端代碼
- 2. imgcook：各類圖像一鍵自動生成代碼的工具
- 3. imgcook：各種圖像一鍵自動生成代碼的工具
- 4. webservice 自動生成客戶端代碼
- 5. cxf客戶端代碼自動生成
- 6. cxf 自動生成客戶端代碼
- 7. 借Adobe XD之力，自動生成Flutter代碼
- 8. 代碼自動生成工具------阿里 imgcook(圖像大廚)體驗版發佈！
- 9. Flutter 新聞客戶端 - 11 APP升級、android動態受權
- 10. Swagger-Condegen自動生成客戶端服務端接口代碼。
- 更多相關文章...
- • XSLT - 在客戶端 - XSLT 教程
- • Eclipse 生成jar包 - Eclipse 教程
- • Java Agent入門實戰（三）-JVM Attach原理與使用
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. vs2019運行opencv圖片顯示代碼時，窗口亂碼
- 2. app自動化 - 元素定位不到？別慌，看完你就能解決
- 3. 在Win8下用cisco ××× Client連接時報Reason 422錯誤的解決方法
- 4. eclipse快速補全代碼
- 5. Eclipse中Java/Html/Css/Jsp/JavaScript等代碼的格式化
- 6. idea+spring boot +mabitys(wanglezapin)+mysql (1)
- 7. 勒索病毒發生變種 新文件名將帶有「.UIWIX」後綴
- 8. 【原創】Python 源文件編碼解讀
- 9. iOS9企業部署分發問題深入瞭解與解決
- 10. 安裝pytorch報錯CondaHTTPError：******
歡迎關注本站公眾號,獲取更多信息
