image.png

    1. import 'package:flutter/material.dart';
    3. void main() => runApp(MyApp());
    5. class MyApp extends StatelessWidget {
    6.   @override
    7.   Widget build(BuildContext context) {
    8.     Color color = Theme.of(context).primaryColor; //定义颜色
    10.     // 创建一组 button
    11.     Widget buttonSection = Container(
    12.         child: Row(
    13.       mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    14.       children: [
    15.         _buildButtonColumn(color, Icons.call, 'CALL'),
    16.         _buildButtonColumn(color, Icons.near_me, 'ROUTE'),
    17.         _buildButtonColumn(color, Icons.share, 'SHARE')
    18.       ],
    19.     ));
    21.     Widget textSection = Container(
    22.         padding: const EdgeInsets.all(32),
    23.         child: Text(
    24.           'Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese '
    25.           'Alps. Situated 1,578 meters above sea level, it is one of the '
    26.           'larger Alpine Lakes. A gondola ride from Kandersteg, followed by a '
    27.           'half-hour walk through pastures and pine forest, leads you to the '
    28.           'lake, which warms to 20 degrees Celsius in the summer. Activities '
    29.           'enjoyed here include rowing, and riding the summer toboggan run.',
    30.           softWrap: true,
    31.         ));
    33.     return MaterialApp(
    34.       title: 'Flutter layout demo',
    35.       home: Scaffold(
    36.         appBar: AppBar(
    37.           title: Text('Flutter layout demo'),
    38.         ),
    39.         body: ListView(
    40.           children: [
    41.             Image.asset(
    42.               'images/lake.jpg',
    43.               width: 600,
    44.               height: 240,
    45.               fit: BoxFit.cover,
    46.             ),
    47.             titleSection,
    48.             buttonSection,
    49.             textSection
    50.           ],
    51.         ),
    52.       ),
    53.     );
    54.   }
    56.   // 快速创建 button 的方法
    57.   Column _buildButtonColumn(Color color, IconData icon, String label) {
    58.     return Column(
    59.       mainAxisSize: MainAxisSize.min,
    60.       mainAxisAlignment: MainAxisAlignment.center,
    61.       children: [
    62.         Icon(icon, color: color),
    63.         Container(
    64.             margin: const EdgeInsets.only(top: 8),
    65.             child: Text(label,
    66.                 style: TextStyle(
    67.                   fontSize: 12,
    68.                   fontWeight: FontWeight.w400,
    69.                   color: color,
    70.                 ))),
    71.       ],
    72.     );
    73.   }
    74. }
    76. // 顶部 title Widget
    77. Widget titleSection = Container(
    78.   padding: const EdgeInsets.all(32), // 容器 padding 32
    79.   child: Row(
    80.     // 定义一行 Row
    81.     children: [
    82.       Expanded(
    83.         /*1 定义一列*/
    84.         child: Column(
    85.           crossAxisAlignment: CrossAxisAlignment.start,
    86.           children: [
    87.             /*2*/
    88.             Container(
    89.               padding: const EdgeInsets.only(bottom: 8),
    90.               child: Text(
    91.                 'Oeschinen Lake Campground',
    92.                 style: TextStyle(
    93.                   fontWeight: FontWeight.bold,
    94.                 ),
    95.               ),
    96.             ),
    97.             Text(
    98.               'Kandersteg, Switzerland',
    99.               style: TextStyle(
    100.                 color: Colors.grey[500],
    101.               ),
    102.             ),
    103.           ],
    104.         ),
    105.       ),
    106.       /*3*/
    107.       Icon(
    108.         Icons.star,
    109.         color: Colors.red[500],
    110.       ),
    111.       Text('41'),
    112.     ],
    113.   ),
    114. );