【從零開始學 Flutter 程式設計】AspectRatio 比例佈局

【從零開始學 Flutter 程式設計】線上教學課程目錄 使用 Dart 程式語言,開發 Android 和 iOS APP 應用程式。

AspectRatio 比例佈局

可將元件調整為特定寬高比

AspectRatio 比例佈局,常用屬性

  • aspectRatio:寬高比

起手式範例

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('HKT線上教室'),
          ),
          body: HomePage()),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Image.network(
      'https://i.imgur.com/ZX0PtRb.png',
    ));
  }
}

範例:設定 aspectRatio 屬性

圖片延展屬性,記得要設定成 「fit: BoxFit.cover」
AspectRatio(
            aspectRatio: 1, // 宽高比
            child: Image.network('https://i.imgur.com/ZX0PtRb.png',
              fit: BoxFit.cover,
            ))

執行畫面

完整程式碼

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('HKT線上教室'),
          ),
          body: Center(
              child: Container(
            child: AspectRatio(
                aspectRatio: 1,
                child: Image.network('https://i.imgur.com/ZX0PtRb.png',
                    fit: BoxFit.cover)),
          ))),
    );
  }
}

那這次的課程就介紹到這邊囉~
順帶一提,KT 線上教室,臉書粉絲團,會不定期發佈相關資訊,不想錯過最新資訊,不要忘記來按讚,加追蹤喔!也歡迎大家將這套課程分享給更多人喔。
我們下次再見囉!!!掰掰~

這個網誌中的熱門文章

最新入門零基礎 Java 教學【從零開始學 Java 程式設計】Java教學課程目錄 (IntelliJ IDEA 開發教學)

2023 最新入門零基礎 Kotlin教學【從零開始學 Kotlin 程式設計】Kotlin 教學課程目錄 (Android Kotlin, IntelliJ IDEA, Android Studio, Android APP 開發教學)

nano 文字編輯器

Android Studio 歷代版本下載點

2022 最新入門零基礎 Flutter教學 【Flutter 程式設計入門實戰 30 天】Flutter 教學課程目錄 (IntelliJ IDEA 開發教學)