一: 实现上面的的页面
二:main.dart 页面
import 'package:flutter/material.dart';
import 'package:flutter_first/scenery/landscape_detail.dart';
void main() {runApp(MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "布局综合示例",
// 自定义主题,主体色彩为绿色格调
theme: ThemeData(brightness: Brightness.light,primaryColor: Colors.lightGreen[600],accentColor: Colors.orange[600]),
home: LandsDetail(),);
}
}
第二步:landscape_detail.dart 应用 ListView 实现布局滚动
import 'package:flutter/material.dart';
class LandsDetail extends StatefulWidget {const LandsDetail({Key? key}) : super(key: key);
@override
State<StatefulWidget> createState() => _LandsDtailState();
}
class _LandsDtailState extends State<LandsDetail> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text(
"武当山风景区",
style: TextStyle(color: Colors.white),
),
),
// 应用列表视图默认为垂直布局,并且子元素可能高低滚动
body: ListView(
children: <Widget>[
// 风景图片
Image.asset("lib/assets/images/wudang.jpg",
width: 600.0, height: 240.0, fit: BoxFit.cover),
AddressContainer(),
ButtonsContainer(),
TextContainer(),],
),
);
}
}
class AddressContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(padding: EdgeInsets.all(32.0), // 此局部周围距离肯定间隔
// 程度布局
child: Row(
children: <Widget>[
Expanded(
child: Column(
// 垂直布局
crossAxisAlignment: CrossAxisAlignment.start, // 次轴说释怀左侧对齐
children: <Widget>[
Container(padding: EdgeInsets.only(bottom: 8.0), // 与上面文本距离肯定间隔
child: Text(
"风景区地址",
style: TextStyle(fontWeight: FontWeight.bold),
),
),
Text(
"湖北十堰市丹江口市",
style: TextStyle(color: Colors.grey[500]),
)
],
)),
// 图标
Icon(
Icons.star,
color: Colors.red[500],
),
Text("66")
],
));
}
}
class ButtonsContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 程度方向均排列每一个元素
children: <Widget>[buildButtonColumn(Icons.call, "电话"),
buildButtonColumn(Icons.near_me, "导航"),
buildButtonColumn(Icons.share, "分享"),
],
),
);
}
Column buildButtonColumn(IconData icon, String label) {
// 垂直布局
return Column(
// 垂直方向大小最小化
mainAxisSize: MainAxisSize.min,
// 垂直方向居中对齐
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// 下面图标局部
Icon(
icon,
color: Colors.lightGreen[600],
),
// 间隔下面肯定间距
Container(margin: EdgeInsets.only(top: 8.0),
child: Text(
label,
style: TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w400,
color: Colors.lightGreen[600]),
),
),
],
);
}
}
class TextContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(padding: const EdgeInsets.all(32.0),
// 文本块肯定要用 ''' 来援用
child: Text('''
武当山,中国道教圣地,又名太和山、谢罗山、参上山、仙室山,古有“太岳”、“玄岳”、“大岳”之称。位于湖北西北部十堰市丹江口市境内。东接闻名古城襄阳市,西靠车城十堰市,南望原始森林神农架,北临高峡平湖丹江口水库。明代,武当山被皇帝封为“大岳”、“治世玄岳”,被尊为“皇室家庙”。武当山以“四大名山皆拱揖,五方仙岳共朝宗”的“五岳之冠”位置闻名于世。1994 年 12 月,武当山古建筑群入选《世界遗产名录》,2006 年被整体列为“全国重点文物保护单位”。2007 年,武当山和长城、丽江、周庄等景区一起入选“欧洲人最青睐的中国十大景区”。2010 至 2013 年,武当山别离被评为国家 5A 级旅游区、国家森林公园、中国十大避暑名山、海峡两岸交换基地,入选“中国最美地质公园”。截至 2013 年,武当山有古建筑 53 处,建筑面积 2.7 万平方米,修建遗迹 9 处,占地面积 20 多万平方米,全山保留各类文物 5035 件。武当山是道教名山和武当武术的发源地,被称为“亘古无双胜境,天下第一仙山”。武当武术,是中华武术的重要流派。元末明初,道士张三丰集其大成,创始武当派。'''),
);
}
}
第三步:援用的图片资源