起因, 目的:
来源: 客户需求。 着急要,我随便写的,应付一下。
过程:
略,直接看代码,看注释。
代码 1 xxx
java
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
// #
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
// 隐藏调试模式横幅
debugShowCheckedModeBanner: false,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: TicTacToeHomePage(), // title: 'Flutter Demo Home Page'
);
}
}
// 这部分就是一个占位的。 是个初步版本。
// TicTacToeHomePage
// class TicTacToeHomePage extends StatelessWidget {
// @override
// Widget build(BuildContext context) {
// return Scaffold(
// appBar: AppBar(
// title: Text('Tic Tac Toe'),
// ),
// body: Center(
// child: Text('hey!!!'),
// ),
// );
// }
// }
class TicTacToeHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Row(
children: <Widget>[
Image(
image: AssetImage('assets/images/face.jpg'), // 替换为你的图片路径
width: 30.0, // Image style
),
SizedBox(width: 10.0), // 间距
Text('123456 someone@who',
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 20.0)), // Text style
],
),
backgroundColor: Colors.blue, // AppBar style
),
// body: Center(
// child: Text('hey!!!'),
// ),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Welcome to the game Tic Tac Toe',
style: TextStyle(
fontSize: 24.0,
color: Colors.orange,
fontWeight: FontWeight.bold)),
// Welcome message with styles
SizedBox(height: 20.0),
// 间距
Image(
image: AssetImage('assets/images/game_img.jpg'), // 替换为你的图片路径
width: 300.0, // Image style
),
SizedBox(height: 20.0),
// 间距
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.red, // 按钮背景颜色
foregroundColor: Colors.white, // 按钮前景色
padding: EdgeInsets.symmetric(
vertical: 10.0, horizontal: 20.0), // 按钮内边距
),
child: Text('Start Game', style: TextStyle(fontSize: 18.0)),
// Button text style
onPressed: () {
print('Key pressed!');
},
),
],
),
),
);
}
}
效果图
结论 + todo
- 最近写的这个几个 flutter:
- 前面2篇,是用 vscode 写的
- 这次是用的是 andriod studio,环境配置差不多用了1个小时。
- andriod studio 很久不用,各种更新。 其实,andriod studio 也挺好的。