淺嚐flutter中的flex布局

2021-09-11 14:35:17 字數 1106 閱讀 2742

假設你已經掌握了flutter的一些基礎知識,比如環境搭建,簡單的dart語法,及flutter元件化思想。那麼你適合閱讀本篇教程,本教程演示一些flutter中的flex用法的簡單示例.

在不懂height: 170.0,width:100.0如何適配不同解析度的時候,只能用flex搞事情,所以咱看看flex如何在flutter中搞事情。

先看效果圖:

分析一下需求:

整個布局最外層是乙個row,左邊是乙個column裡面再巢狀乙個row,**實現如下:

import 'package:flutter/material.dart';

class fluterflex extends statelesswidget

}複製**

這只是純元件**,還沒有新增任何樣式

最外層的row,有2個子元件,它們主軸為水平方向,起點為左端,和flex的flex-direction: row同樣效果,子元件的對齊方式為兩端對齊,flex**為 justify-content: space-between。

然後左側布局為column,主軸方向為垂直方向,兩個子元件的布局方式為兩端對齊,flex**為: justify-content:space-between。

左側底部同理。在flutter如果實現呢,**如下:

import 'package:flutter/material.dart';

class fluterflex extends statelesswidget

}複製**

效果如圖:

在上面**中,還新增了一些其他樣式,並且給每乙個元件都加了border,這樣便於新手布局。我們把多餘的**刪掉然後稍作改進,完整**如下:

import 'package:flutter/material.dart';

class fluterflex extends statelesswidget

}複製**

淺嚐flutter中的flex布局

假設你已經掌握了flutter的一些基礎知識,比如環境搭建,簡單的dart語法,及flutter元件化思想。那麼你適合閱讀本篇教程,本教程演示一些flutter中的flex用法的簡單示例.在不懂height 170.0,width 100.0如何適配不同解析度的時候,只能用flex搞事情,所以咱看看...

Flutter必備 Flex布局完全解讀

flex布局是flutter的五虎上將之一,虎父無犬子,其子row和column也能力非凡 你有沒有被mainaxisalignment,crossaxisalignment弄得暈頭轉向,本文將助你將他們納入麾下。先看一下父子三人在flutter布局體系中的位置 多子元件布局 enum axis也就...

Flutter必備 Flex布局完全解讀

0.前言flex布局是flutter的五虎上將之一,虎父無犬子,其子row和column也能力非凡 你有沒有被mainaxisalignment,crossaxisalignment弄得暈頭轉向,本文將助你將他們納入麾下。先看一下父子三人在flutter布局體系中的位置 多子元件布局 1.flex的...