关于flutter:Flutter-学习第四课综合部分页面详情页

一: 实现上面的的页面

二：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 件。武当山是道教名山和武当武术的发源地，被称为“亘古无双胜境，天下第一仙山”。武当武术，是中华武术的重要流派。元末明初，道士张三丰集其大成，创始武当派。'''),
    );
  }
}

第三步：援用的图片资源