zoukankan      html  css  js  c++  java
  • flutter 布局简介

     1 import 'package:flutter/material.dart';
     2 
     3 class LayoutDemo extends StatelessWidget {
     4   @override
     5   Widget build(BuildContext context) {
     6     return Column(
     7       mainAxisAlignment: MainAxisAlignment.center,
     8       children: <Widget>[
     9         // aspectratio会自动填充父元素宽度,根据设定的宽高比自动扩充高度。
    10         AspectRatio(
    11           aspectRatio: 16/9,
    12           child: Container(
    13             color: Colors.black87,
    14           ),
    15         ),
    16         SizedBox(
    17           height: 100,
    18            200,
    19           child: Container(
    20             child: Icon(Icons.poll, size: 50),
    21             alignment: Alignment.topRight,
    22             decoration: BoxDecoration(
    23               borderRadius: BorderRadius.circular(10),
    24               gradient: LinearGradient(
    25                 colors: [
    26                   Color.fromRGBO(255, 75, 43, 0.9),
    27                   Color.fromRGBO(255, 65, 108, 0.95),
    28                 ],
    29               ),
    30               boxShadow: [
    31                 BoxShadow(
    32                   color: Colors.black87,
    33                   offset: Offset(0, 10),
    34                   blurRadius: 10,
    35                   spreadRadius: -3
    36                 )
    37               ]
    38             ),
    39           ),
    40         ),
    41         // 这里的sizedbox可当divider用
    42         SizedBox(
    43           height: 20,
    44         ),
    45         SizedBox(
    46           height: 100,
    47            200,
    48           child: Container(
    49             decoration: BoxDecoration(
    50               gradient: LinearGradient(
    51                 colors: [
    52                   Color.fromRGBO(255, 75, 43, 1),
    53                   Color.fromRGBO(255, 65, 108, 1),
    54                 ],
    55               ),
    56             ),
    57           ),
    58         )
    59       ],
    60     );
    61   }
    62 }

     比较常用的就是Row()、Colmun(),具体的用法参考css的flexbox布局,比较相似。

  • 相关阅读:
    GitHub 如何创建 Access Token
    Fact Table 数据表什么意思
    高基数数据特性是什么意思
    Edge 浏览器的隐藏 URL QR 生成器
    Apache Druid 安装的时候进行 Java 版本校验没有输出
    Apache Druid 简介
    如何在 Discourse 中批量移动主题到不同的分类中
    素材
    Drawable转bitmap
    Drawable与 Bitmap 转换总结
  • 原文地址:https://www.cnblogs.com/liwenchi/p/10796718.html
Copyright © 2011-2022 走看看