美文网首页
Flutter Ailgn布局

Flutter Ailgn布局

作者: 喜剧收尾_XWX | 来源:发表于2020-09-03 08:13 被阅读0次
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "Ailgn布局",
      home: Scaffold(
          appBar: AppBar(
            title: Text('Ailgn布局'),
          ),
          body: Stack(
            children: <Widget>[
              //左上角
              Align(
                //对齐属性,确定位置
                alignment: FractionalOffset(0.0, 0.0),
                child: Image.asset(
                  'images/1.jpeg',
                  width: 120,
                  height: 120,
                ),
              ),

              //右上角
              Align(
                alignment: FractionalOffset(1.0, 0.0),
                child: Image.asset(
                  'images/2.jpeg',
                  width: 120,
                  height: 120,
                ),
              ),

              //中心
              Align(
                alignment: FractionalOffset.center,
                child: Image.asset(
                  'images/3.jpeg',
                  width: 120,
                  height: 120,
                ),
              ),

              //左下角
              Align(
                alignment: FractionalOffset.bottomLeft,
                child: Image.asset(
                  'images/4.jpeg',
                  width: 120,
                  height: 120,
                ),
              ),

              //右下角
              Align(
                alignment: FractionalOffset.bottomRight,
                child: Image.asset(
                  'images/5.jpeg',
                  width: 120,
                  height: 120,
                ),
              ),
            ],
          )),
    );
  }
}

相关文章

  • Flutter Ailgn布局

  • Flutter 布局

    Flutter 布局详解 Flutter 布局(一)- Container详解 Flutter 布局(二)- Pa...

  • Flutter-布局

    一、介绍 flutter布局需要先了解flutter所有布局的widget,首先flutter布局分为Contai...

  • Flutter-汇总

    Flutter(一)--Flutter安装遇到的问题汇总 Flutter(二)--布局机制、布局步骤、水平和垂直布...

  • Flutter旋转位移等操作

    flutter布局-5-Matrix4矩阵变换Flutter 布局(六)- SizedOverflowBox、Tr...

  • flutter布局-3-center

    Center 居中的布局 连载:flutter布局-1-column连载:flutter布局-2-row 只能有一...

  • Flutter及Dart入门

    目录 Dart语言下的Flutter Flutter Widget Flutter 布局 Flutter 页面 路...

  • flutter(六,页面布局篇)

    Tags: flutter Flutter页面布局篇 [TOC] 1. 布局及装饰组件说明 2. 基础布局处理 2...

  • 2019-04-15 Flutter 布局方式

    1:Flutter 的 布局 1.1概述: 1.2总体 flutter 中的布局 是以原子布局实体为填充物,根据行...

  • flutter布局-4-container

    Container 容器 连载:flutter布局-1-column连载:flutter布局-2-row连载:fl...

网友评论

      本文标题:Flutter Ailgn布局

      本文链接:https://www.haomeiwen.com/subject/qbbydktx.html