7.4.4 Wra p(按宽⾼⾃动换⾏布局)
7.4.4 Wr a
7.5 综合布局
如下⾯Demo_7.5_布局综合⽰例
代码⽰例
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class  MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Align对齐布局⽰例',
// ⾃定义主题，主题颜⾊为绿⾊风格
theme: ThemeData(
brightness: Brightness.light,//应⽤程序整体主题的亮度
primaryColor: Colors.lightGreen[600],//App主要部分的颜⾊
accentColor: ange[600],//前景⾊(⽂本、按钮等)
),
home: LayoutDemo5(),
);
}
}
// Demo_7.5_布局综合⽰例
// 布局综合⽰例
class LayoutDemo25 extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
//风景区地址部分
Widget addressContainer = Container(
padding: EdgeInsets.all(32.0),//此部分四周间隔⼀定距离
child: Row(
children: <Widget>[
// Expanded填充左右组件的空隙部分
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,//顶部对齐
children: <Widget>[
Container(
padding: ly(bottom: 8.0),//与上下⽂本间隔⼀定距离                  child: Text(
'风景区地址',
style: TextStyle(
fontWeight: FontWeight.bold,
)
,
),
),
Text(
'湖北省⼗堰市丹江⼝市',
style: TextStyle(
color: [500],
),
)
],
),
)
,
Icon(
Icons.star,
color: d[500],
),
Text(
'66'
)
],
),
);
/
/ 构建按钮组中单个按钮参数为图标及⽂本
Column buildButtonColumn(IconData icon, String label) {
return Column(
mainAxisSize: MainAxisSize.min,//垂直⽅向⼤⼩最⼩化
mainAxisAlignment: ,//垂直⽅向居中对齐
children: <Widget>[
Icon(
icon,
color: Colors.lightGreen[600],//上⾯部分图标
),
Container(
margin: ly(top: 8.0),
child: Text(
label,
style: TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w400,
color: Colors.lightGreen[600],
),
),
)
],
)
;
}
//按钮组部分
Widget buttonsContainer = Container(
//容器横向布局
child: Row(
/*
enum MainAxisAlignment {
//将⼦控件放在主轴的开始位置
start,
//将⼦控件放在主轴的结束位置
end,
//将⼦控件放在主轴的中间位置
center,
//将主轴空⽩位置进⾏均分，排列⼦元素，⼿尾没有空隙
spaceBetween,
//将主轴空⽩区域均分，使中间各个⼦控件间距相等，⾸尾⼦控件间距为中间⼦控件间距的⼀半
spaceAround,
//将主轴空⽩区域均分，使各个⼦控件间距相等
spaceEvenly,
}
*/
mainAxisAlignment: MainAxisAlignment.spaceAround,//⽔平⽅向均匀排列每个元素
children: <Widget>[
buildButtonColumn(Icons.call, '电话'),
ar_me, '导航'),
buildButtonColumn(Icons.share, '分享'),
],
),
);
//风景区介绍⽂本部分
Widget textContainar = Container(
padding: EdgeInsets.all(32.0),
/
/⽂本块⼀定是⽤'''来引⽤起来
child: Text(
'''
武当⼭，中国道教圣地，⼜名太和⼭、谢罗⼭、参上⼭、仙室⼭，古有“太岳”、“⽞岳”、“⼤岳”之称。位于湖北西北部⼗堰市丹江⼝市境内。东接闻名古城襄阳市，西靠车城⼗
武当⼭，中国道教圣地，⼜名太和⼭、谢罗⼭、参上⼭、仙室⼭，古有“太岳”、“⽞岳”、“⼤岳”之称。位于湖北西北部⼗堰市丹江⼝市境内。东接闻名古城襄阳市，西靠车城⼗明代，武当⼭被皇帝封为“⼤岳”、“治世⽞岳”，被尊为“皇室家庙”。武当⼭以“四⼤名⼭皆拱揖，五⽅仙岳共朝宗”的“五岳之冠”地位闻名于世。 [1]
1994年12⽉，武当⼭古建筑⼊选《世界遗产名录》，2006年被整体列为“全国重点⽂物保护单位” [2]  。2007年，武当⼭和长城、丽江、周庄等景区⼀起⼊选 “欧洲⼈最喜爱的中截⾄2013年，武当⼭有古建筑53处，建筑⾯积2.7万平⽅⽶，建筑遗址9处，占地⾯积20多万平⽅⽶，全⼭保存各类⽂物5035件。 [8-9]
武当⼭是道教名⼭和武当武术的发源地，被称为“亘古⽆双胜境，天下第⼀仙⼭”。武当武术，是中华武
术的重要流派。元末明初，道⼠张三丰集其⼤成，开创武当派。
''',
softWrap: true,
),
);
return Scaffold(
appBar: AppBar(
title: Text(
'武当⼭风景区',
style: TextStyle(
color: Colors.white,
)
,
),
),
body: ListView(
children: <Widget>[
Image.asset(
'images/wudangshan.jpg',
width: 100.0,
height: 240.0,
fit: ver,//图⽚填充整个⽗容器
),
addressContainer,
buttonsContainer,
textContainar,
],
),
);
}
}
// Demo_7.4.4_Wrap(按宽⾼⾃动换⾏布局)
// Wrap(按宽⾼⾃动换⾏布局)
class LayoutDemo24 extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('Wrap(按宽⾼⾃动换⾏布局)'),
),
body: Wrap(
spacing: 8.0,//Chip之间的间隙⼤⼩
runSpacing: 4.0,//⾏之间的间隙⼤⼩
children: <Widget>[
Chip(
//添加圆形头像
avatar: CircleAvatar(
backgroundColor: Colors.lightGreen.shade800,
child: Text(
'西门',
style: TextStyle(
fontSize: 10.0,
),
flutter开发app),
),
label: Text('西门吹雪'),
),
Chip(
//添加圆形头像
avatar: CircleAvatar(
backgroundColor: Colors.lightGreen.shade800,
child: Text(
'摘星',
style: TextStyle(
fontSize: 10.0,

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。