Flutter綜合部分頁(yè)面詳情頁(yè)實(shí)現(xiàn)過(guò)程示例

更新時(shí)間：2023年08月06日 09:31:54 作者：Rocky_ruan

這篇文章主要為大家介紹了Flutter綜合部分頁(yè)面詳情頁(yè)實(shí)現(xiàn)過(guò)程步驟示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

實(shí)現(xiàn)頁(yè)面

一:實(shí)現(xiàn)下面的的頁(yè)面

dart頁(yè)面示例

main.dart頁(yè)面

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: "布局綜合示例",
      //自定義主題，主體顏色為綠色風(fēng)格
      theme: ThemeData(brightness: Brightness.light,primaryColor: Colors.lightGreen[600],accentColor: Colors.orange[600]),
      home: LandsDetail(),
    );
  }
}

ListView 布局滾動(dòng)

landscape_detail.dart 使用ListView 實(shí)現(xiàn)布局滾動(dòng)

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(
          "武當(dāng)山風(fēng)景區(qū)",
          style: TextStyle(color: Colors.white),
        ),
      ),
      //使用列表視圖默認(rèn)為垂直布局，并且子元素能夠上下滾動(dòng)
      body: ListView(
        children: <Widget>[
          //風(fēng)景圖片
          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, //次軸說(shuō)放心左側(cè)對(duì)齊
              children: <Widget>[
                Container(
                  padding: EdgeInsets.only(bottom: 8.0), //與下面文本間隔一定距離
                  child: Text(
                    "風(fēng)景區(qū)地址",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                ),
                Text(
                  "湖北十堰市丹江口市",
                  style: TextStyle(color: Colors.grey[500]),
                )
              ],
            )),
            //圖標(biāo)
            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, //水平方向均排列每一個(gè)元素
        children: <Widget>[
          buildButtonColumn(Icons.call, "電話"),
          buildButtonColumn(Icons.near_me, "導(dǎo)航"),
          buildButtonColumn(Icons.share, "分享"),
        ],
      ),
    );
  }
  Column buildButtonColumn(IconData icon, String label) {
    //垂直布局
    return Column(
      //垂直方向大小最小化
      mainAxisSize: MainAxisSize.min,
      //垂直方向居中對(duì)齊
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        //上面圖標(biāo)部分
        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),
      //文本塊一定要用'''來(lái)引用
      child: Text('''
            武當(dāng)山，中國(guó)道教圣地，又名太和山、謝羅山、參上山、仙室山，古有“太岳”、“玄岳”、“大岳”之稱。位于湖北西北部十堰市丹江口市境內(nèi)。東接聞名古城襄陽(yáng)市，西靠車城十堰市，南望原始森林神農(nóng)架，北臨高峽平湖丹江口水庫(kù)。
            明代，武當(dāng)山被皇帝封為“大岳”、“治世玄岳”，被尊為“皇室家廟”。武當(dāng)山以“四大名山皆拱揖，五方仙岳共朝宗”的“五岳之冠”地位聞名于世。
            1994年12月，武當(dāng)山古建筑群入選《世界遺產(chǎn)名錄》，2006年被整體列為“全國(guó)重點(diǎn)文物保護(hù)單位”。2007年，武當(dāng)山和長(zhǎng)城、麗江、周莊等景區(qū)一起入選“歐洲人最喜愛的中國(guó)十大景區(qū)”。2010至2013年，武當(dāng)山分別被評(píng)為國(guó)家5A級(jí)旅游區(qū)、國(guó)家森林公園、中國(guó)十大避暑名山、海峽兩岸交流基地，入選“中國(guó)最美地質(zhì)公園”。
            截至2013年，武當(dāng)山有古建筑53處，建筑面積2.7萬(wàn)平方米，建筑遺址9處，占地面積20多萬(wàn)平方米，全山保存各類文物5035件。
            武當(dāng)山是道教名山和武當(dāng)武術(shù)的發(fā)源地，被稱為“亙古無(wú)雙勝境，天下第一仙山”。武當(dāng)武術(shù)，是中華武術(shù)的重要流派。元末明初，道士張三豐集其大成，開創(chuàng)武當(dāng)派。
'''),
    );
  }
}