Flutter 基础

最新推荐文章于 2024-03-31 01:24:53 发布
最新推荐文章于 2024-03-31 01:24:53 发布
阅读量258 收藏 1
点赞数 1
分类专栏： 笔记 泛客户端开发 文章标签： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50983325/article/details/120040157
版权

初始化项目

项目目录
在这里插入图片描述
UI 库 material

import 'package:flutter/material.dart';

Material 是一种标准的移动端和 Web 端的 UI 框架，是一套 Google 的设计规范，Flutter 项目以Material 为 UI 基础。

App 结构

  • MaterialApp

    在这里插入图片描述

  • Scaffold

    • appBar（应用头部）
    • body（应用主体）
    • floatingActionButton（浮动按钮）
    • drawer （左侧抽屉菜单）
    • endDrawer （右侧抽屉菜单）

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

基础组件

Text
在这里插入图片描述
设置自定义字体

  • 导入字体文件
    字体文件可以网上找到，例如：https://fonts.google.com/
    选择需要的字体文件，然后下载
    将字体文件放到 Flutter 项目目录中

  • 在 pubspec.yaml 中声明字体

     flutter:
 #......
 fonts:
 	# family 属性决定了字体的名称，你将会在 TextStyle 的 fontFamily 属性中用到。
    - family: SourceSansPro
      fonts:
        - asset: fonts/Source_Sans_Pro/SourceSansPro-Black.ttf
        - asset: fonts/Source_Sans_Pro/SourceSansPro-BlackItalic.ttf
          # weight 属性指定了文件中字体轮廓的字重为 100 的整数倍
          weight: 300
          # style 属性指定文件中字体的轮廓是否为 italic 或 normal
          style: italic

lcon
Icon 用来声明图标，Icons 是Flutter 中的图标组件

Icon(
	Icons.ac_unit_rounded,
	color:Colors.green,
	size:40,
),

在线预览：https://material.io/resources/icons

Color

  • Color（自定义颜色）
    • Flutter 中通过 ARGB 来声明颜色
    • const Color(0xFF42A5F5); // 16进制的ARGB = 透明度 + 六位十六进制颜色
    • const Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5);
    • const Color.fromARGB(255, 66, 165, 245);
    • const Color.fromRGBO(66, 165, 245, 1.0); // O = Opacity
  • Colors（英文字母声明的颜色）
    • Colors.red

布局 - Container

  • child （声明子组件）
  • padding （margin）
    • EdgeInsets （all(), fromLTRB(), only()）
  • decoration 是 container 的修饰器，用来设置背景和边框
    • BoxDecoration （边框，圆角，渐变，阴影，背景色，背景图片）
  • alignment 内容对齐方式
    • Alignment （内容对齐）
  • transform
    • Matrix4 （平移 - translate、旋转 - rotate、缩放 - scale、斜切 - skew）

线性布局

  • Column
    • Column 中的主轴方向是垂直方向
    • mainAxisAlignment：MainAxisAlignment 主轴对齐方式
    • crossAxisAlignment：CrossAxisAlignment 交叉抽对齐方式
    • children：内容
  • Row
  • Row 中的主轴方向是水平方向（其他属性与 Column 一致）

弹性布局

  • Flex
    • direction （声明主轴方向）
    • mainAxisAlignment （声明主轴对齐方式）
    • textDirection （声明水平方向的排列顺序）
    • crossAxisAlignment （声明交叉轴的对齐方式）
    • verticalDirection （声明垂直方向的排列顺序）
    • children （声明子组件）
  • Expanded （可伸缩组件）
    • flex （声明弹性布局所占比例）
    • child （声明子组件）

流式布局

  • Wrap （解决内容溢出问题）
    • spacing （主轴方向子组件的间距）
    • alignment （主轴方向的对齐方式）
    • runSpacing （纵轴方向子组件的间距）
    • runAlignment （纵轴方向的对齐方式）
  • Chip （标签）
  • CircleAvatar （圆形头像）

层叠布局
在这里插入图片描述
Card
在这里插入图片描述

Card(
  margin: EdgeInsets.all(30),
    color: Colors.purpleAccent[100],
    shadowColor: Colors.yellow, // 阴影颜色
    elevation: 20, // 阴影高度
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(40),
      side: BorderSide(
        color: Colors.yellow,
        width: 3,
      ),
    ),
    child: Column(
      children: [
        ListTile(
          leading: Icon(
            Icons.supervised_user_circle_rounded,
            size: 50
          ),
          title: Text(
            "张三",
            style: TextStyle(
              fontSize: 30
            ),
          ),
          subtitle: Text(
            "董事长",
            style: TextStyle(
              fontSize: 20
            ),
          ),
        ),
        Divider(),
        ListTile(
          title: Text(
            "电话：13333333333",
            style: TextStyle(
              fontSize: 20
            ),
          ),
        ),
        ListTile(
          title: Text(
            "地址：XXXXXXXX",
            style: TextStyle(
              fontSize: 20
            ),
          ),
        )
      ],
    )
  ),

按钮
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
图片
在这里插入图片描述

Image.asset(
 'images/bg1.jpg',
   width: 200,
   height: 200,
   fit: BoxFit.fill,
 ),
 // 加载网络图片
 Image.network(
   'http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5a260090e0e08770b0bd865845a4b4ab.jpg',
   repeat: ImageRepeat.repeat,
   colorBlendMode: BlendMode.colorDodge,
   color: Colors.green,
 ),

列表

  • SingleChildScrollView （类似于Android中的ScrollView）
    • child （子组件）
    • padding （内边距）
    • scrollDirection （滚动方向： Axis.horizontal | Axis.vertical）
    • reverse （初始滚动位置，false 头部， true 尾部）
    • physics （ 结束拖动时效果响应）
      • ClampingScrollPhysics：Android 下微光效果
      • BouncingScrollPhysics：iOS 下弹性效果
  • ListView
    • 加载列表的组件（加载所有的 Widgets，适用 widgrt 较少的场景）
      • ListTile （leading、title、subtitle、trailing、selected）
    • ListView.builder
      • 按需加载 widget ，性能比默认构造函数高，适用 widget 较多的场景
    • ListView.separated
      • 比 ListView.builder 多了分隔器
  • GridView （网格布局）
    • children （子组件）
    • scrollDirection （滚动方向）
    • gridDelegate
      • SliverGridDelegateWithFixedCrossAxisCount （指定列数 - 子组件宽度自适应）
      • SliverGridDelegateWithMaxCrossAxisExtent （指定子组件宽度 - 列数自适应）
  • GridView.count （列数固定）
  • GridView.extend （子组件宽度固定）
  • GridView.buildre （动态网格布局）
    在这里插入图片描述
  • ScrollPhysics physics （确定可滚动控件的物理特性）
    • BouncingScrollPhysics （允许超出边界 - 反弹效果）
    • ClampingScrollPhysics （防止超出边界 - 夹住效果）
    • AlwaysScrollableScrollPhysics （始终响应滚动）
    • NeverScrollableScrollPhysics （不响应滚动）

其他组件

Cupertino

在这里插入图片描述
SafeArea

  • SafeArea 主要用来解决刘海屏的问题。

第三方库组件

在这里插入图片描述
dio

flutter_swiper

  • Flutter 中最好的轮播组件,适配，Android 和 iOS
  • 使用步骤
    • 在 pubsepc.yaml 中添加 flutter_swiper 依赖
    • 安装依赖 （pub get | flutter packages get | VS Code 中保存配置，自动下载）
    • 引入 import ‘package:flutter_swiper/flutter_swiper.dart’;
    • 使用

shared_preferences

  • shared_preferences 是一个本地数据缓存库 （类似 AsyncStorage）
  • 使用步骤
    • 在 pubsepc.yaml 中添加 shared_preferences 依赖
    • 安装依赖 （pub get | flutter packages get | VS Code 中保存配置，自动下载）
    • 引入 import ‘package:shared_preferences/shared_preferences.dart’;
    • 使用

操作

  • 增
    • setString（key, value）
  • 删
    • remove(key) | clear()
  • 改
    • 更改就是重新设置数据
    • setString（key, value）
  • 查
    • getString(key)

状态管理

StatefulWidget

  • Flutter 中的组件，按状态划分
    • StatelessWidget （无状态组件）
    • StatefulWidget （有状态组件）
  • 按状态作用域划分
    • 组件内私有状态 （StatefulWidget）
    • 跨组件状态共享 （lnheritedWidget、Provider）
    • 全局状态 （Redux | fish-redux 、mobx …）
  • 状态组件的组成
    • StatefulWidget （组件本身不可变 - @immutable）
    • State （将变化的状态放到 State 中维护）

DataTable
在这里插入图片描述
InheritedWidget

  • What：提供了沿树向下，共享数据的功能
    • 即子组件可以获取父组件（InheritedWidget 的子类）的数据
  • Why
    • 依赖构造函数传递数据的方式不能满足业务需求
    • 所以，需要一个新的，更好的跨组件数据传输方案
  • How
    • BuildContext.dependOnInheritedWidgetOfExactType()

在这里插入图片描述
在这里插入图片描述
生命周期

  • initState() 组件对象插入到元素树中时
  • didChangeDependencies() 当前状态对象的依赖改变时
  • build() 组件渲染时
  • setState() 组件对象的内部状态变更时
  • didUpdateWidget() 组件配置更新时
  • deactivate() 组件对象在元素中暂时移除时
  • dispose() 组件对象在元素树中永远移除时

在这里插入图片描述
在这里插入图片描述
Provider

在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述

路由与导航

路由简介

  • Route
    • 一个路由是一个屏幕或页面的抽象
  • Navigator
    • 管理路由的组件。Navigator可以通过路由入栈和出栈来实现页面之间的跳转
    • 常用属性
      • initialRoute: 初始路由，即默认页面
      • onGenerateRoute: 动态路由（根据规则匹配动态路由）
      • onUnknownRoute: 未知路由，也就是 404
      • routers：路由集合

匿名路由

  • Navigator
    • push（跳转到指定组件）
      Navigator.push(
  context, 
  MaterialPageRoute(builder: (context) => 组件名称())
);
    • pop（回退）
      Navigator.pop(context)

命名路由

MaterialApp(
  // ... // 其他配置
  routes: { // 注册路由 （路由表）
    'home': (context) => Home(),
    'product': (context) => Product(),
    'productDetail': (context) => ProductDetail(),
  },
  initialRoute: 'home', // 初始路由页面
  onUnknownRoute: (RouteSettings setting) => MaterialPageRoute(
    builder: (context) => UnknowPage() // 未知路由
  ),
);

动态路由

MaterialApp(
  onGenerateRoute: (RouteSettings setting) {
    // 匹配首页 /
    print('当前路径：'+setting.name);
    if (setting.name == '/') {
      return MaterialPageRoute(builder: (context) => Home());
    }
    if (setting.name == '/product') {
      return MaterialPageRoute(builder: (context) => Product());
    }

    // 匹配 /product/:id
    var uri = Uri.parse(setting.name);
    print(uri.pathSegments);
    if (uri.pathSegments.length == 2 && uri.pathSegments.first == 'product') {
      var id = uri.pathSegments[1];
      return MaterialPageRoute(builder: (context) => ProductDetail(id: id));
    }
	// 最后跳到未知路由
    return MaterialPageRoute(builder: (context) => UnknowPage());
  },
)

路由传参

  • 匿名路由
    在这里插入图片描述
  • 命名路由
    在这里插入图片描述

Drawer 导航
在这里插入图片描述
BottomNavigationBar 底部导航菜单
在这里插入图片描述
TabBar - 选项卡菜单
在这里插入图片描述

表单

Switch

  • 常用属性
    在这里插入图片描述
  • CupertinoSwitch （iOS 风格的开关）
    • import ‘package:flutter/cupertino.dart’;

Checkbox

  • 常用属性
    在这里插入图片描述
  • CheckboxListTile
    • title （标题）
    • subtitle （子标题）

Radio

  • 常用属性
    在这里插入图片描述
  • RadioListTitle （单选列表）
    在这里插入图片描述
    TextField （表单）
    在这里插入图片描述

日历

  • CalendarDatePicker （日历选择器）
    • initialCalendarMode
      • DatePickerMode.day
      • DatePickerMode.year
  • showDatePicker （日期选择器）
    • initialDatePickerMode （year | day）
    • initialEntryMode （calendar | input）
  • showTimePicker （时间选择器）

Form
在这里插入图片描述
在这里插入图片描述

动画

动画分类

  • 补间（Tween）动画
    • 在补间动画中，我们定义开始点和结束点、时间线以及定义转换时间和速度曲线。然后由系统计算，从开始点运动到结束点。从而形成动画效果。
    • 例如：透明度从 0 到 1，颜色值从 0 到 255
  • 拟物动画
    • 拟物动画是对真实世界的行为进行建模，使动画效果类似于现实中的物理效果。
    • 例如：弹簧，阻尼，重力，抛物线等。

Animation

  • Animation，是 Flutter 动画库中的一个核心类。它包含动画的值和状态两个属性，定义了动画的一系列监听方法。
    • 监听值：
      • addListener
      • removeListener
    • 监听状态
      • addStatusListener
      • removeStatusListener

动画状态

  • AnimationStatus.dismissed
    • 动画初始状态
  • AnimationStatus.completed
    • 动画结束状态
  • AnimationStatus.forward
    • 动画从开始状态执行到结束状态
  • AnimationStatus.reverse
    • 动画反向执行，从结束状态执行到开始状态

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

@override
  void initState() {
    // TODO: implement initState
    super.initState();

    // 1.创建 AnimationController
    controller = AnimationController(
      duration: Duration(milliseconds: 400),
      vsync: this
    );

    // 2.1 声明动画曲线
    animation = CurvedAnimation(parent: controller, curve: Curves.bounceIn);

    // 2.2 设置动画值的范围
    animation = Tween(begin: 50.0, end: 400.0).animate(controller);

    // 3. 监听动画
    animation.addListener(() {
      print(animation.value);
      setState(() {
        
      });
    });

    // 4. 执行动画
    // controller.forward();
  }

在这里插入图片描述
在这里插入图片描述

多语言（国际化）

组件国际化

  • 在 pubspec.yaml 中添加依赖

    dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

  • 配置 MaterialApp

    • localizationsDelegates
      指定哪些组件需要进行国际化（例如：Material、Widgets、Cupertino）

      当前，设置具体内容之前，先引入 flutter_localizations import
      ‘package:flutter_localizations/flutter_localizations.dart’;

    • supportedLocales
      指定要支持哪些语言

    import 'package:flutter_localizations/flutter_localizations.dart';

MaterialApp(
  ...
  localizationsDelegates: [
    // 本地化代理
    CustomLocalizations.delegate,
    GlobalMaterialLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
  ],
  supportedLocales: [
    const Locale('en', 'US'), // 美国英语
    const Locale('zh', 'CN'), // 简体中文
  ],
)

文本国际化

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'dart:convert';

class CustomLocalizations {
  final Locale locale;

  CustomLocalizations(this.locale);

  // static Map<String, Map<String, String>> _localizedValues = {
    // "en": {
    //   "title": "Home",
    //   "greet": "Hello",
    // },
  //   "zh": {
  //     "title": "首页",
  //     "greet": "你好",
  //   },
  // };

  Map<String, String> _localizedValues;

  Future<bool> loadJSON() async {
    String jsonString = await rootBundle.loadString('lang/${locale.languageCode}.json');
    Map<String, dynamic> jsonMap = json.decode(jsonString);

    _localizedValues = jsonMap.map((key, value) {
      return MapEntry(key, value.toString());
    });

    return true;
  }

  String t(String key) {
    // _localizedValues['zh']['title']
    // return _localizedValues[locale.languageCode][key];
    return _localizedValues[key];
  }

  static CustomLocalizations of(BuildContext context) {
    return Localizations.of(context, CustomLocalizations);
  }

  static CustomLocalizationsDelegate delegate = CustomLocalizationsDelegate();
}

class CustomLocalizationsDelegate extends LocalizationsDelegate<CustomLocalizations> {
  @override
  bool isSupported(Locale locale) {
    return ["en", "zh"].contains(locale.languageCode);
  }

  @override
  Future<CustomLocalizations> load(Locale locale) async {
    // return SynchronousFuture(CustomLocalizations(locale));
    CustomLocalizations localizations = CustomLocalizations(locale);
    await localizations.loadJSON();
    return localizations;
  }

  @override
  bool shouldReload(covariant LocalizationsDelegate<CustomLocalizations> old) {
    return false;
  }
}

import 'CustomLocalizations.dart';

class HomePage extends StatelessWidget {
  const HomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        // "Hello",
        // Localizations.of(context, CustomLocalizations).t('greet'),
        CustomLocalizations.of(context).t('greet'),
        style: TextStyle(
          fontSize: 60
        )
      ),
    );
  }
}

多主题

在这里插入图片描述
在这里插入图片描述

MaterialApp(
  theme: ThemeData(
     // fontFamily: 'SourceSansPro',
     primaryColor: Colors.red,
     accentColor: Colors.yellow,
     // 针对旧按钮有效
     buttonTheme: ButtonThemeData(
       textTheme: ButtonTextTheme.accent,
       splashColor: Colors.green,
       height: 50
     ),
     textTheme: TextTheme(
       subtitle1: TextStyle(
         fontSize: 30,
         color: Colors.green,
       )
     ),
     iconTheme: IconThemeData(
       color: Colors.pink,
       size: 40
     ),
     cardTheme: CardTheme(
       color: Colors.brown[100],
       shape: Border.all(width: 10, color: Colors.red),
       elevation: 20,
     )
   ),

   // 适配终端的主题风格
   theme: ThemeData.light(),
   darkTheme: ThemeData.dark(),

   theme: CustomTheme.lightTheme,
   darkTheme: CustomTheme.darkTheme,
)
christian-dong
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
FlutterSwitch:为Flutter创建的自定义开关包
03-06
flutter_switch 为Flutter创建的易于实现的自定义开关。 为它提供自定义的高度和宽度，开关和切换框的边框，边框半径，颜色，切换框大小，显示“打开”和“关闭”文本的选项，并能够在切换框内添加图标。 演示版 影片版本： ： 将此包用作库 将此添加到包的pubspec.yaml文件中： dependencies : flutter_switch : ^0.2.0 您可以使用Flutter从命令行安装软件包： $ flutter pub get 导入您的项目： import 'package:flutter_switch/flutter_switch.dart' ; 样品用量 class MyHomePage extends StatefulWidget { @override _MyHomePageState createState () => _
Flutter 控件 Switch、SwitchListTile、CupertinoSwitch
weixin_38107457的博客
02-16 652
Switch Switch为material风格的开关组件，基本用法如下： var _switchValue = false; _buildSwitch(){ return Switch( value: _switchValue, onChanged: (value){ setState(() { _switchValue = value; }); }, ); } 设置激活状态下thumb及track颜色，用法如下： .
Flutter开发之——交互组件-Switch
最新发布
2401_84010865的博客
03-31 298
activeTrackColor | 滑块轨迹颜色 | Colors对象 || activeColor | 滑块打开后颜色(为图像时，不显示) | Colors对象 || inactiveTrackColor | 滑块未打开时轨迹颜色 | Colors对象 || inactiveThumbColor | 滑块未打开时颜色 | Colors对象 || activeThumbImage | 滑块打开后的图标 | ImageProvider对象 |
【Flutter】Dart 数据类型 List 集合类型 ( 定义集合 | 初始化 | 泛型用法 | 初始化后添加元素 | 集合生成函数 | 集合遍历 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-18 8945
I . 定义集合并初始化 II . 集合泛型用法 III . 集合添加元素 IV . 集合生成函数 V . 集合遍历 VI . 集合示例代码
Flutter pubspec.yaml配置文件说明
lidongxiu0714
09-03 2万+
有烦心事，有为难事！就怕没有好心态。（资料来源于flutter官网https://flutter.io/assets-and-images/） 类似android开发中的AndroidManifest.xml，Gradle配置文件，Flutter项目根目录下的pubspec.yaml文件是Flutter的配置文件。 虽然都是移动开发中的配置文件，但差别还是挺大的。 在Flutter中，虽然在...
flutter基础教程
06-10
Flutter基础入门视频教程，Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。通过这门课程的学习使得大家掌握使用flutter来编写跨平台移动客户端应用。
Flutter基础学习PDF
09-05
Flutter从零开始学习，Windows环境下搭建环境。着手Flutter混合开发从零到开发应用的进阶。爱学习的你值得拥有！
Flutter基础学习笔记.pdf
01-15
Flutter 基础学习笔记 Flutter 是 Google 推出的移动应用程序开发框架，使用 Dart 编程语言，可以跨平台运行在 Android 和 iOS 设备上。下面是 Flutter 基础学习笔记的知识点总结。 一、环境准备 1. 下载 ...
flutter基础教程课件
12-17
flutter基础教程课件
Flutter 基础篇.pdf
11-12
在 Flutter 基础篇中，我们将了解到 Flutter 的发展历史，Flutter 的 特性，以及 Flutter 的基础开发知识。
Flutter 添加插件(Packages)问题pubspec.yaml
热门推荐
陈英有
09-21 2万+
在Flutter工程下添加二个packages: english_words: ^3.1.0 shared_preferences: ^0.4.2 首页在“pubspec.yaml”文件下编写： dev_dependencies: flutter_test: sdk: flutter english_words: ^3.1.0 shared_preferences:...
dart初始化列表
09-10 3176
http://wiki.jikexueyuan.com/project/dart-language-tour/classes.html 初始化列表 除了调用父类构造函数，你也可以在构造函数体运行之前初始化实例变量。用逗号隔开使其分别初始化。 class Point { num x; num y; Point(this.x, this.y); // 初始化列表在构造函数运...
2021年Flutter中的开关组件Switch
码蝗的博客
03-04 329
Flutter中用Switch来表示开关组件。 主要属性如下： 1. value 选中时的值； 2. onChanged 改变时触发的事件； 3. activeColor 选中时的颜色； 代码示例： import 'package:flutter/material.dart'; class SwitchPage extends StatefulWidget { SwitchPage({Key key}) : super(key: key); @override
flutter 将16进制颜色转换成flutter的argb形式
weixin_45425105的博客
03-12 1018
用 #RRGGBB 规定十六进制颜色，其中 RR（红色）、GG（绿色）和 BB（蓝色）十六进制整数指定颜色的成分（分量）。所有值必须在 00 到 FF 之间。 例如，＃0000ff 值呈现为蓝色，因为蓝色分量设置为最高值（ff），其他分量设置为 00。 如需增加透明度，请在 00 和 FF 之间添加两个额外的数字。 首先16进制颜色的表示是通过一个以“＃”开头的6位十六进制数值表示一种颜色。6位数字分为3组，每组两位，依次表示红、绿、蓝三种颜色的强度。例如：＃ff0000 比如#CDD920转化成flutt
flutter 开关Switch与复选框Checkbox
代码小疯子
06-30 2089
Switch and Checkbox activeColor → Color - 激活时原点的颜色。 activeThumbImage → ImageProvider - 原点还支持图片，激活时的效果。 activeTrackColor → Color - 激活时横条的颜色。 inactiveThumbColor → Color - 非激活时原点的...
Dart之 初始化列表
日积月累
05-21 2387
dart初始化
09-11 1744
初始化其实不是指初始化构造函数中的几个参数，而是字段 初始化器列表(Initializer list) class Point { final num x; final num y; final num distanceFromOrigin; Point(x, y) : x = x, y = y, distanceFromOrig...
Flutter 基础案例
05-13
以下是一个简单的 Flutter 基础案例，用于显示一个文本和一个图片： ```dart import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', home: Scaffold( appBar: AppBar( title: Text('Flutter Demo'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'Hello, world!', style: TextStyle(fontSize: 24), ), SizedBox(height: 16), Image.network( 'https://picsum.photos/200', width: 200, ), ], ), ), ), ); } } ``` 在这个案例中，我们创建了一个 `MyApp` 类作为根组件，并在 `build` 方法中返回一个 `MaterialApp` 组件。在 `MaterialApp` 中，我们设置了应用的标题，并指定了主页为 `Scaffold` 组件。 在 `Scaffold` 组件中，我们设置了一个 `AppBar`，并在 `body` 属性中放置了一个 `Center` 和一个 `Column` 组件。在 `Center` 组件中，我们将 `Column` 组件居中显示。在 `Column` 组件中，我们放置了一个 `Text` 组件和一个 `Image` 组件，分别用于显示文本和图片。 最后，我们在 `main` 函数中运行了 `MyApp` 组件。当我们运行这个案例时，将会在屏幕上显示一个带有文本和图片的界面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值