flutter组件学习之对齐组件align

   日期:2020-07-13     浏览:96    评论:0    
核心提示:先上代码import package:flutter/material.dart;void main()=> runApp(new MyApp());class MyApp extends StatelessWidget{ @override Widget build(BuildContext context){ return MaterialApp( title: Align组件, home:Scaffold( appBa_flutter row 一个左对

先上代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: "Align组件",
      home:Scaffold(//Scaffold定义页面的结构
          appBar:AppBar(
            title: Text("Align组件"),
          ),
        body:Container(
          // width: 200.0,
          // height: 200.0,
          color: Colors.blue,
          child: Align(
            widthFactor: 2.0,
            heightFactor: 3.0,
            alignment: Alignment.center,
            child: Container(
              width: 50.0,
              height: 50.0,
              color: Colors.red,
              child: Text("居中",style: TextStyle(color: Colors.white),),
            ),
          ),
        )
      )

    );
  }
}

运行效果图

Align组件

属性主要有两类:

  1. alignment:设置子组件在父组件里的对齐方式属性值有:
    center:上下左右居中,
    topRight:父组件的右上角
    topCenter:顶部中间
    topLeft:左上
    。。。。以此类推centerLeft,centerRight等等
    还有一种用法是alignment: Alignment(x,y),x是横向,y是纵向,值的范围是0-1,
    alignment: Alignment(0.0,0.0)等同于alignment: Alignment.center
    alignment: Alignment(1.0,1.0)等同于alignment: Alignment.topRight
    alignment: Alignment(-1.0-1.0)等同于alignment: Alignment.bottomLeft
  2. widthFactor和heightFactor
    是设置父容器的宽高是子组件宽高的几倍(前提是父组件没有设置宽高,否则设置无效)
    示例代码:
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: "Align组件",
      home:Scaffold(
          appBar:AppBar(
            title: Text("Align组件"),
          ),
        body:Container(
          // width: 200.0,
          // height: 200.0,
          color: Colors.blue,
          child: Align(
            widthFactor: 2.0,
            heightFactor: 3.0,
            alignment: Alignment(0.0,0.0),
            child: Container(
              width: 100.0,
              height: 100.0,
              color: Colors.red,
              child: Text("居中",style: TextStyle(color: Colors.white),),
            ),
          ),
        )
      )

    );
  }
}

效果图

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服