如皋教育门户网站建设经验,开网店要建网站 一起的吗,鸿鹄网站建设,嵌入式开发板以下内容更适用于 不拘泥于教程学习#xff0c;而是从简单项目入手的初学者。
在开始第一个项目之前#xff0c;我们先要了解 两个概念。
Widget 和 属性
Widget 是用户界面的基本构建块#xff0c;可以是任何 UI 元素。属性 是 widget 类中定义的变量#xff0c;用于配…以下内容更适用于 不拘泥于教程学习而是从简单项目入手的初学者。
在开始第一个项目之前我们先要了解 两个概念。
Widget 和 属性
Widget 是用户界面的基本构建块可以是任何 UI 元素。属性 是 widget 类中定义的变量用于配置和定制 widget 的外观和行为。当你创建一个 widget 时可以通过构造函数传递参数来设置这些属性从而定制 widget 的表现。Widget包含属性
UI 元素Text、Image、Container、Column、AppBar 、布局等等
外观颜色、大小、形状等等
行为点击事件、动画、数据更新等等
vscode创建默认项目这里默认前置工作都已经准备好了
1. Hellow world
替换lib\main.dart
import package:flutter/material.dart;void main() {runApp(const MyApp());
}// 定义无状态组件
class MyApp extends StatelessWidget{const MyApp({super.key});overrideWidget build(BuildContext context){return MaterialApp(// 初始标题title: Welcome to flutter,// 初始页面home: Scaffold(appBar: AppBar(title: const Text(Welcome to flutter),),// 居中 一个子widgetbody: const Center(child: Text(Hellow World, // 字体样式style: TextStyle(// 字体颜色color: Colors.green,)),),// 垂直排列 多个子widget// body: Column(// // 只能定义一个children属性 可包含 一个wedget或者wedget列表// children: [// const Text(Hello World),// Image.network(https://gd-hbimg.huaban.com/88b49ee5dc63c49f26d984a71ce061729f27070c3124c-jZyeMc_fw1200webp,fit: BoxFit.cover),// const Center(// child: Text(Hello world),// ),// ],// ),),);}
}
flutter run 命令运行 2. 使用依赖包package
包管理https://pub.dev/ 打开包管理网站 搜索 english_words 终端运行 flutter packages get 获取依赖包
import package:flutter/material.dart;
// 引入 英文单词 包
import package:english_words/english_words.dart;void main() {runApp(const MyApp());
}// 定义无状态组件
class MyApp extends StatelessWidget{const MyApp({super.key});overrideWidget build(BuildContext context){return MaterialApp(// 初始标题title: Welcome to flutter,// 初始页面home: Scaffold(appBar: AppBar(title: const Text(Welcome to flutter),),// 居中 一个子widgetbody: Center(child: Text(generateWordPairs().take(10).map((pair) pair.asPascalCase).join(\n), // 字体样式style: TextStyle(// 字体颜色color: Colors.green,)),),),);}
}
保存 终端 输入r 热重载运行
