Flutter 布局

一 布局

 import 'package:flutter/material.dart';

class LayoutDemon extends StatelessWidget
{
  @override
  Widget build (BuildContext context){
    return  Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
       // crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
//一摞小部件
          Stack(
//矩形中某点对齐
            alignment: Alignment.topLeft,
            children: [
              SizedBox(
                width: 200,
                height: 200,
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.green,
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: Icon(Icons.cabin,
                    color: Colors.red,
                    size: 32,
                  ),
                ),
              ),
              SizedBox(
                height: 20,
              ),
//强制固定固件尺寸
              SizedBox(
                width: 100,
                height: 100,
                child: Container(
                 // alignment: Alignment(0.2,0.8),
//修边
                  decoration: BoxDecoration(
                    color: Colors.black45,
                    borderRadius: BorderRadius.circular(8),
                  ),
                ),
              ),
              Positioned(
                right: 20,
                top: 20,
                child: Icon(Icons.abc_rounded,
                color: Colors.blue,
                size: 32,
              ),
              ),
            ],
          ),

        ],
      ),
    );
  }
}
//带限制的盒子

import 'package:flutter/material.dart';

class LayoutDemon extends StatelessWidget
{
  @override
  Widget build (BuildContext context){
    return  Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
       // crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
           AspectRatio(
             aspectRatio: 16/9,
             child: Container(
               color: Colors.redAccent,
             ),

           ),


        ],
      ),
    );
  }
}

二 效果图

截屏2023-07-11 14.48.15.png