Flutter布局基础示例

xiaohai 2019-05-25 16:20:58 709人围观 标签: Flutter 
简介通过学习Flutter的布局,可以通过ListView、Container、Row、Column等组件来对界面进行布局。

在学习《Flutter技术入门与实战》布局一节后,按照书上的案例动手将代码整理了下来,供后期参考。该示例主要包含四个主要部分:

1、顶部的图片

此部分我们直接通过Image组件进行实现。

2、地址部分

该部分主要包含了两个小区域,第一个是地址,第二个是星星数量。所以我们先通过Row来进行布局,然后再左边部分的地址部分通过Column来进行布局。

3、按钮部分

该区域其实思路跟第二步一样,先通过Row进行布局,然后内部通过Column来进行布局。

4、文字区域

通过Text进行展示即可

5、整体布局

主要由于文字介绍区域内容会超过屏幕,为了使其能进行滚动,所以这里使用了ListView组件。

代码如下
//main.dart文件内容 import 'package:flutter/material.dart'; void main() { runApp(new App()); } class App extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: '布局综合示例', theme: ThemeData( brightness: Brightness.light, primaryColor: Colors.lightGreen[600], accentColor: Colors.orange[600], ), home: Scaffold( appBar: AppBar( title: new Text('布局综合示例'), ), body: Layout(), ), ); } } class Layout extends StatelessWidget { @override Widget build(BuildContext context) { return ListView( children: <Widget>[ AspectRatio( aspectRatio: 16 / 9, child: Image.network( "http://img.hi917.com/public/5ce51a6909ce0.jpg", fit: BoxFit.cover, ), ), Address(), ButtonArea(), Content(), ], ); } } class Address extends StatelessWidget { @override Widget build(BuildContext context) { return Container( padding: EdgeInsets.all(32.0), child: Row( children: <Widget>[ Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Container( padding: EdgeInsets.only(bottom: 8.0), child: Text( "联系地址", style: TextStyle( fontWeight: FontWeight.bold, ), ), ), Text( "四川省成都市锦江区", style: TextStyle( color: Colors.grey[500], ), ) ], ), ), Icon( Icons.star, color: Colors.red[400], ), Text("100+"), ], ), ); } } class Content extends StatelessWidget { @override Widget build(BuildContext context) { return Container( padding: EdgeInsets.all(10.0), child: Text( ''' 人生是一种选择,亦是一种放弃。能自由选择的人是幸福的,能适度放弃的心是洒脱的。可惜,有时我们的选择,没有结果,只能黯然离开;有时我们的放弃,迫于无奈,含泪转身,走远了依旧频频地回望。因此,有些过去,关于幸福或伤痛,只能深埋心底;有些希冀,关于现在或将来,只能慢慢遗忘。 光阴蹉跎,世界喧嚣,我自己要警惕,在人生旅途上保持一份童趣和闲心是不容易的。如果哪一天我只是埋头于人生中的种种事务,不再有兴致扒在车窗旁看沿途的风光,倾听内心的音乐,那时候我就真正老了俗了,那样便辜负了人生这一趟美好的旅行。 都说岁月是无情的,然而岁月无情亦有情,只要我们足够珍惜,只要能够读懂它的内涵,做一个岁月里的主人,留下一段美丽的故事。它一定会给予我们智慧,柔软,淡然,在岁月里,做一个懂得岁月的人吧,把它捧在手里,放在心上,慢慢地读,慢慢地解其中的滋味。因为,岁月虽已老,心依然年轻。 人生在世,看开是最好,一辈子不长,开心时不要得意,伤心时不要失意,人世间悲伤的不仅仅是你我,走过了坎坷,迎面的也许就是欢乐。 生活一旦忙碌起来,什么情绪也没时间表达了,愿一觉醒来,一切都变美好。所有深夜的心事都变成头顶的星星,指向每一条正确的路。你多学一样赚钱的本事,就少说一句求人的话。没有人能打倒你,除了你自己。最终,真正重要的不是生命里的岁月,而是岁月中的生活。 骚!要骚的个性;贱!要贱的自在;浪!要浪得风流,疯,要疯得够狂。 哭泣时自己擦眼泪,加班时自己打鸡血,落魄时自己熬鸡汤,想买的包也是自己买,如果注定要一个人,也要成为一个有钱的人。 ''', softWrap: true, style: TextStyle( color: Colors.black54, ), ), ); } } //将按钮定义成一个类,这里主要是想联系通过数据来生成所有组件信息 class ButtonGroup { IconData icon; String name; ButtonGroup({this.icon, this.name}); } List<ButtonGroup> buttons = [ ButtonGroup(icon: Icons.call, name: '联系电话'), ButtonGroup(icon: Icons.near_me, name: '导航'), ButtonGroup(icon: Icons.share, name: '分享'), ]; class ButtonArea extends StatelessWidget { @override Widget build(BuildContext context) { return Container( color: Colors.grey[200], padding: EdgeInsets.all(10.0), margin: EdgeInsets.only(left: 10.0, right: 10.0), child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, //水平均匀排列元素 children: buttons.map((ButtonGroup item) { //可以将这里抽出去写一个单独的组件 return Column( mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.min, children: <Widget>[ Icon( item.icon, color: Colors.lightGreen[600], ), Container( margin: EdgeInsets.only(top: 8.0), child: Text( item.name, style: TextStyle( fontSize: 12.0, fontWeight: FontWeight.bold, color: Colors.lightGreen[600], ), ), ), ], ); }).toList(), ), ); } }

运行效果如下:

image.png