Flutter之Flex组件布局

目录

Flex属性值

轴向:direction:Axis.horizontal

主轴方向:mainAxisAlignment:MainAxisAlignment.center

交叉轴方向:crossAxisAlignment:CrossAxisAlignment

主轴尺寸:mainAxisSize

文字方向:textDirection:TextDirection

竖直方向排序:verticalDirection:VerticalDirection

基线对齐方式:textBaseline:TextBaseline

使用方法

第一种写法

第二种写法 

---

Flex属性值

 

轴向:direction:Axis.horizontal

enum Axis {horizontal,//水平vertical,//竖直
}

主轴方向:mainAxisAlignment:MainAxisAlignment.center

enum MainAxisAlignment {start,//顶头end,//接尾center,//居中spaceBetween,//顶头接尾，其他均分spaceAround,//中间的孩子均分,两头的孩子空一半spaceEvenly,//均匀平分}

交叉轴方向:crossAxisAlignment:CrossAxisAlignment

enum CrossAxisAlignment {start,//顶头end,//接尾center,//居中stretch,//伸展baseline,//基线
}

主轴尺寸:mainAxisSize

enum MainAxisSize {min,max,
}

文字方向:textDirection:TextDirection

enum TextDirection {ltr,//从左到右rtl,//从右到左
}

竖直方向排序:verticalDirection:VerticalDirection

enum VerticalDirection{up,down,
}

基线对齐方式:textBaseline:TextBaseline

enum TextBaseline {alphabetic,ideographic,
}

 

使用方法

第一种写法

Column(mainAxisAlignment: MainAxisAlignment.spaceBetween,crossAxisAlignment: CrossAxisAlignment.stretch,children: [Flexible(flex: 1,child: Container(color: Colors.red,width: 100, // 宽度固定height: double.infinity, // 纵向填满),),Flexible(flex: 2,child: Container(color: Colors.blue,width: 100,height: double.infinity,),),],)

第二种写法 

import 'dart:async';import 'package:flutter/material.dart';
import 'package:flutter_diancan/pages/layout/login_page.dart';
import 'package:flutter_diancan/pages/home/home_page.dart';
import 'package:flutter_diancan/stores/user_store.dart';
import 'package:provider/provider.dart';class Startpage extends StatelessWidget {const Startpage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(centerTitle: true,title: Text("首页"),),body: Center(child: testFlex()));}testFlex() {var redBox = Container(color: Colors.red,height: 80,width: double.infinity,child: const Text("红"),);var blueBox = Container(color: Colors.blue,height: 80,width: double.infinity,child: const Text("蓝"),);var yellowBox = Container(color: Colors.yellow,height: 80,width: double.infinity,child: const Text("黄"),);var greenBox = Container(color: Colors.green,height: 80,width: double.infinity,child: const Text("绿"),);var show = Flex(direction: Axis.vertical,crossAxisAlignment: CrossAxisAlignment.start,textBaseline: TextBaseline.alphabetic,mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[redBox, blueBox, yellowBox, greenBox],mainAxisSize: MainAxisSize.max,);return show;}
}