一个简单的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, //文本将在填充满列宽后在单词边界处自动换行。
),
);
注意
分为四部分，图片区域，标题行，按钮行，文本区
