android flutter
LinearLayout --------------------------- Row/Column
android 原生LinerLayout 垂直、水平 及 权重
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#ff0000"/>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#00ff00"/>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#00ffff"/>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="10dp"
android:background="#ffffff"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#ff0000"/>
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#00ff00"/>
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#00ffff"/>
</LinearLayout>
</LinearLayout>
flutter实现
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: MyApp(),
));
if (Platform.isAndroid) {
SystemUiOverlayStyle systemUiOverlayStyle =
SystemUiOverlayStyle(statusBarColor: Colors.transparent);
SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
}
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
Expanded(
child: Container(
color: Color(0xffff0000),
),
flex: 1,
),
Expanded(
child: Container(
color: Color(0xff00ff00),
),
flex: 1,
),
Expanded(
child: Container(
color: Color(0xff00ffff),
),
flex: 1,
),
],
),
flex: 1,
),
Container(
color: Color(0xffffffff),
height: 10,
),
Expanded(
child: Column(
children: <Widget>[
Expanded(
child: Container(
color: Color(0xffff0000),
),
flex: 1,
),
Expanded(
child: Container(
color: Color(0xff00ff00),
),
flex: 1,
),
Expanded(
child: Container(
color: Color(0xff00ffff),
),
flex: 1,
),
],
),
flex: 1,
),
],
);
}
}
效果
总结 控件按比例平分 使用Expanded控件包括 通过flex设置比例参数
LinerLayout 对齐方式
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffff00">
<View
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#ff0000"/>
<View
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#000000"/>
</LinearLayout>
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Color(0xffffff00),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
color: Color(0xffff0000),
width: 50.0,
height: 50.0,
),
Container(
color: Color(0xff000000),
width: 50.0,
height: 50.0,
),
],
),
);
}
}
总结:flutter mainAxisAlignment 主轴方向指的是控件的方向 如果控件是Colum 主轴方向是垂直方向 如果控件Row 主轴方向水平方向 crossAxisAlignment 交叉轴与主轴相反 Colum交叉轴方向 水平方向 Row交叉轴方向 垂直方向