首页 > 编程语言 >一统天下 flutter - widget 容器类(只能有一个子): AspectRatio - 按比例

一统天下 flutter - widget 容器类(只能有一个子): AspectRatio - 按比例

时间:2023-04-14 09:02:12浏览次数:49  
标签:widget Container color flutter child 100.0 AspectRatio

一统天下 flutter https://github.com/webabcd/flutter_demo
作者 webabcd

一统天下 flutter - widget 容器类(只能有一个子): AspectRatio - 按比例

示例如下:

lib\widget\container\aspect_ratio.dart

/*
 * AspectRatio - 按比例
 */

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Container(
          color: Colors.red,
          alignment: Alignment.center,
          width: double.infinity,
          height: 100.0,
          /// AspectRatio 用于让 child 按照 aspectRatio 指定的宽高比显示
          child: AspectRatio(
            aspectRatio: 16 / 9,
            child: Container(
              color: Colors.green,
            ),
          ),
        ),
        Container(
          color: Colors.red,
          alignment: Alignment.center,
          width: 100.0,
          height: 100.0,
          /// AspectRatio 用于让 child 按照 aspectRatio 指定的宽高比显示
          child: AspectRatio(
            aspectRatio: 2.0,
            child: Container(
              width: 100.0,
              height: 50.0,
              color: Colors.green,
            ),
          ),
        ),
        Container(
          color: Colors.red,
          alignment: Alignment.center,
          width: 100.0,
          height: 100.0,
          /// AspectRatio 用于让 child 按照 aspectRatio 指定的宽高比显示
          child: AspectRatio(
            aspectRatio: 0.5,
            child: Container(
              width: 100.0,
              height: 50.0,
              color: Colors.green,
            ),
          ),
        ),
      ],
    );
  }
}

一统天下 flutter https://github.com/webabcd/flutter_demo
作者 webabcd

标签:widget,Container,color,flutter,child,100.0,AspectRatio
From: https://www.cnblogs.com/webabcd/p/flutter_lib_widget_container_aspect_ratio.html

相关文章

  • 一统天下 flutter - 输入: Draggable/DragTarget - 拖拽
    一统天下flutterhttps://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-输入:Draggable/DragTarget-拖拽示例如下:lib\input\drag.dart/**Draggable/DragTarget-拖拽**Draggable-按下后可拖拽的对象*LongPressDraggable-长按后可......
  • 一统天下 flutter - widget 滚动类: ScrollNotification - 滚动通知
    一统天下flutterhttps://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widget滚动类:ScrollNotification-滚动通知示例如下:lib\widget\scroll\scroll_notification.dart/**ScrollNotification-滚动通知*/import'package:flutter/mater......
  • 一统天下 flutter - widget 滚动类: DraggableScrollableSheet - 可滚动组件,并且支持
    一统天下flutterhttps://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widget滚动类:DraggableScrollableSheet-可滚动组件,并且支持通过拖拽的方式上下展开示例如下:lib\widget\scroll\draggable_scrollable_sheet.dart/**DraggableScrollable......
  • 一统天下 flutter - widget 状态管理: 状态管理 - 在树上,父监听子的通知
    一统天下flutterhttps://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widget状态管理:状态管理-在树上,父监听子的通知示例如下:lib\state\notification_listener.dart/**状态管理-在树上,父监听子的通知**在树上,子通过Notification触......
  • 一统天下 flutter - widget 列表类: GridView - 网格
    一统天下flutterhttps://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widget列表类:GridView-网格示例如下:lib\widget\list\grid_view.dart/**GridView-网格*/import'dart:math';import'package:flutter/material.dart';im......
  • Qt之QTableWidget的使用
    #ifndefMAINWINDOW_H#defineMAINWINDOW_H#include<QtWidgets>#include<QDebug>#include<QJsonArray>#include<QJsonObject>#include<QJsonValue>#include<QJsonDocument>#defineTABLE_HEADER_STYLE"QHeaderVie......
  • Flutter/React native/un-app
    Flutter是Google开源的构建用户界面(UI)工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动、Web、桌面和嵌入式平台。[5] Flutter开源、免费,拥有宽松的开源协议,适合商业项目。Flutter可以方便的加入现有的工程中。在全世界,Flutter正在被越来越多的开发者和组织使......
  • Flutter和小程序容器技术,全新的小程序解决方案
    Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。它也是构建未来的GoogleFuchsia应用的主要方式。什么是Flutter?Flutter是一种......
  • Flutter升级错误
    升级一个老项目,用的是flutter,升级完了一直报错:/C:/Users/***/AppData/Local/Pub/Cache/hosted/pub.flutter-io.cn/file-6.1.2/lib/src/interface/file.dart:15:16:Error:Themethod'File.create'hasfewernamedargumentsthanthoseofoverriddenmethod'File.create......
  • QTableWidget获取列(行)索引方法
    //获取指定的列索引集合QList<int>QcViewBaseForm::getSelectedColumns(QTableWidget*tableWidget){QList<int>selectedColumns;QList<QTableWidgetSelectionRange>selectedRanges=tableWidget->selectedRanges();for(autorange:selec......