flutter布局练习代码

一个简单的flutter布局界面练习代码

实现效果

分为四部分，图片区域，标题行，按钮行，文本区域

// flutter 布局练习
import 'package:flutter/material.dart';

void main() {
    
    
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
    
    
  const MyApp({
    
    Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      title: 'Flutter layout demo',
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter layout demo")),
        body: ListView(
          children: [
            Image.asset(
              'images/study100.jpg',
              width: 600,
              height: 300,
              fit: BoxFit.fill,
            ),
            titleSection,
            buttonSection,
            textSection
          ],
        ),
      ),
    );
  }
}

// 标题行
Widget titleSection = Container(
  padding: const EdgeInsets.all(32),
  child: Row(children: [
    Expanded(
      child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        Container(
          padding: const EdgeInsets.only(bottom: 8),
          child: const Text(
            "Oeschinen Lake Campground",
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
        ),
        Text(
          "Kandersteg, Switzerland",
          style: TextStyle(color: Colors.grey[500]),
        )
      ]),
    ),
    Icon(
      Icons.star,
      color: Colors.red[500],
    ),
    const Text('41'),
  ]),
);

// 按钮行
// Color color = Theme.of(context).primaryColor;
Color color = Color.fromARGB(255, 19, 161, 238);

Widget buttonSection = Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    _buildButtonColumn(Color.fromARGB(255, 19, 161, 238), Icons.call, 'CALL'),
    _buildButtonColumn(color, Icons.near_me, 'ROUTE'),
    _buildButtonColumn(color, Icons.share, 'SHARE'),
  ],
);
Column _buildButtonColumn(Color color, IconData icon, String label) {
    
    
  return Column(
    mainAxisSize: MainAxisSize.min,
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Icon(icon, color: color),
      Container(
        margin: const EdgeInsets.only(top: 8),
        child: Text(
          label,
          style: TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w400,
            color: color,
          ),
        ),
      ),
    ],
  );
}

// 文本区域
Widget textSection = const Padding(
  padding: EdgeInsets.all(32),
  child: Text(
    'Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese '
    'Alps. Situated 1,578 meters above sea level, it is one of the '
    'larger Alpine Lakes. A gondola ride from Kandersteg, followed by a '
    'half-hour walk through pastures and pine forest, leads you to the '
    'lake, which warms to 20 degrees Celsius in the summer. Activities '
    'enjoyed here include rowing, and riding the summer toboggan run.',
    softWrap: true, //文本将在填充满列宽后在单词边界处自动换行。
  ),
);

注意

在最后的图片引入

1. 更新 pubspec.yaml 文件，添加一个 assets 标签，注意 ** - images 之前有个空格**
   
2. 在根目录 建立一个images文件夹，放入图片
3. 在界面中引入 图片使用asset方式