阅读背景:

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



你的当前访问异常,请进行认证后继续阅读剩余内容。

分享到: