今天来看下Flutter的布局。
这里是官方文档链接。https://flutter.cn/docs/development/ui/layout
官方文档里的栗子 https://github.com/cfug/flutter.cn/tree/master
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(color: Colors.white),
child: const Center(
child: Text(
'Hello world',
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: 32,
color: Colors.black38,
),
),
),
);
}
}
Flutter App本身就是一个widget，大多数widgets都有一个build()方法，返回一个widget显示出来。
上边的demo，就是实例化了一个Container，decoration接收一个BoxDecoration类型来装饰Widget。可以实现圆形、圆角、下划线、阴影、渐变色背景等。
import 'package:flutter/material.dart';
class ShowView extends StatelessWidget {
const ShowView({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "hello world",
home: buildHomePage("this is title"),
);
}
Widget buildHomePage(String title) {
//顶部title
const titleText = Padding(
padding: EdgeInsets.all(20),
child: Text(
'Strawberry Pavlova',
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.w800,
letterSpacing: 0.5,
fontSize: 30,
),
),
);
const subTitle = Text(
'Pavlova is a meringue-based dessert named after the Russian ballerina '
'Anna Pavlova. Pavlova features a crisp crust and soft, light inside, '
'topped with fruit and whipped cream.',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Georgia',
fontSize: 14,
),
);
//评分的5颗星星
var stars = Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.star, color: Colors.green[500]),
Icon(Icons.star, color: Colors.green[500]),
Icon(Icons.star, color: Colors.green[500]),
const Icon(Icons.star, color: Colors.black),
const Icon(Icons.star, color: Colors.black),
],
);
final ratings = Container(
padding: const EdgeInsets.all(20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
stars,
const Text(
'170 Reviews',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w800,
fontFamily: 'Roboto',
letterSpacing: 0.5,
fontSize: 20,
),
),
],
),
);
const descTextStyle = TextStyle(
color: Colors.black,
fontWeight: FontWeight.w800,
fontFamily: 'Roboto',
letterSpacing: 0.5,
fontSize: 18,
height: 2,
);
// DefaultTextStyle.merge() allows you to create a default text
// style that is inherited by its child and all subsequent children.
final iconList = DefaultTextStyle.merge(
style: descTextStyle,
child: Container(
padding: const EdgeInsets.all(20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Icon(Icons.kitchen, color: Colors.green[500]),
const Text('PREP:'),
const Text('25 min'),
],
),
Column(
children: [
Icon(Icons.timer, color: Colors.green[500]),
const Text('COOK:'),
const Text('1 hr'),
],
),
Column(
children: [
Icon(Icons.restaurant, color: Colors.green[500]),
const Text('FEEDS:'),
const Text('4-6'),
],
),
],
),
),
);
final topColumn = Container(
color: Colors.red,
padding: const EdgeInsets.fromLTRB(20, 30, 20, 20),
child: Column(
children: [
titleText,
subTitle,
ratings,
iconList,
],
),
);
final mainImage = Image.asset(
'assets/images/pavlova.jpg',
fit: BoxFit.cover,
);
return Container(
color: Colors.yellow,
margin: const EdgeInsets.fromLTRB(0, 40, 0, 30),
height: 600,
child: Card(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: 440,
child: topColumn,
),
mainImage,
],
),
),
);
}
}
官方文档上有这么一个tips 为了最大限度地减少高度嵌套的布局代码可能导致的视觉混乱，可以在变量和函数中实现 UI 的各个部分。 所以，开发的时候尽量单独实现控件，最后组装。
标准 widgets
-
Container：向 widget 增加 padding、margins、borders、background color 或者其他的“装饰”。 -
GridView：将 widget 展示为一个可滚动的网格。 -
ListView：将 widget 展示为一个可滚动的列表。 -
Stack：将 widget 覆盖在另一个的上面。
Material widgets
Container
class ContainerTest extends StatelessWidget {
const ContainerTest({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Container',
home: Scaffold(
appBar: AppBar(
title: const Text('App bar title'),
),
body: Center(
child: _buildImageColumn(),
),
),
);
}
Widget _buildImageColumn() {
return Container(
decoration: const BoxDecoration(
color: Colors.black38,
),
child: Column(
children: [
_buildImageRow(1),
_buildImageRow(3),
],
),
);
}
Widget _buildImageRow(int imageIndex) => Row(
children: [
_buildDecoratedImage(imageIndex),
_buildDecoratedImage(imageIndex + 1),
],
);
Widget _buildDecoratedImage(int imageIndex) => Expanded(
child: Container(
decoration: BoxDecoration(
border: Border.all(width: 10, color: Colors.yellow),
borderRadius: const BorderRadius.all(Radius.circular(8)),
),
margin: const EdgeInsets.all(20),
child: Image.asset('assets/images/pic$imageIndex.jpg'),
),
);
}
许多布局都可以随意的使用Container，可以将使用了padding或者更加了borders，margins的widget分开。可以将整个布局放到container中，改变它的背景色或者图片来改变设备的背景。
只包含一个child，这个子widget可以是行，列或者根widget。
GridView和ListView
GridView 类似iOS里的CollectionView，ListView 相当于TableView。
// #docregion grid
Widget _buildGrid() => GridView.extent(
maxCrossAxisExtent: 150,
padding: const EdgeInsets.all(4),
mainAxisSpacing: 4,
crossAxisSpacing: 4,
children: _buildGridTileList(30));
// The images are saved with names pic0.jpg, pic1.jpg...pic29.jpg.
// The List.generate() constructor allows an easy way to create
// a list when objects have a predictable naming pattern.
List<Container> _buildGridTileList(int count) => List.generate(
count, (i) => Container(child: Image.asset('images/pic$i.jpg')));
// #enddocregion grid
Widget _buildList() {
return ListView(
children: [
_tile('CineArts at the Empire', '85 W Portal Ave', Icons.theaters),
_tile('The Castro Theater', '429 Castro St', Icons.theaters),
_tile('Alamo Drafthouse Cinema', '2550 Mission St', Icons.theaters),
_tile('Roxie Theater', '3117 16th St', Icons.theaters),
_tile('United Artists Stonestown Twin', '501 Buckingham Way',
Icons.theaters),
_tile('AMC Metreon 16', '135 4th St #3000', Icons.theaters),
const Divider(),
_tile('K\'s Kitchen', '757 Monterey Blvd', Icons.restaurant),
_tile('Emmy\'s Restaurant', '1923 Ocean Ave', Icons.restaurant),
_tile(
'Chaiya Thai Restaurant', '272 Claremont Blvd', Icons.restaurant),
_tile('La Ciccia', '291 30th St', Icons.restaurant),
],
);
}
ListTile _tile(String title, String subtitle, IconData icon) {
return ListTile(
title: Text(title,
style: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 20,
)),
subtitle: Text(subtitle),
leading: Icon(
icon,
color: Colors.blue[500],
),
);
}
// #enddocregion list
Card
接收单个子项，但是子项可以是 Row、Column 或者其他可以包含列表子项的 widget
显示圆角和阴影
Card 的内容无法滚动
ListTile
- 一个可以包含最多 3 行文本和可选的图标的专用的行
- 比
Row更少的配置，更容易使用 - 来自 Material 库
