flutter 写个简单的界面

起因, 目的:

来源: 客户需求。 着急要,我随便写的,应付一下。

过程:

略,直接看代码,看注释。

代码 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 也挺好的。

老哥留步,支持一下。

相关推荐
活宝小娜18 分钟前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点21 分钟前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow22 分钟前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o23 分钟前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
----云烟----1 小时前
QT中QString类的各种使用
开发语言·qt
lsx2024061 小时前
SQL SELECT 语句:基础与进阶应用
开发语言
开心工作室_kaic1 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā1 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
向宇it1 小时前
【unity小技巧】unity 什么是反射?反射的作用?反射的使用场景?反射的缺点?常用的反射操作?反射常见示例
开发语言·游戏·unity·c#·游戏引擎
武子康1 小时前
Java-06 深入浅出 MyBatis - 一对一模型 SqlMapConfig 与 Mapper 详细讲解测试
java·开发语言·数据仓库·sql·mybatis·springboot·springcloud