?
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class Layout extends StatelessWidget {
@override
Widget build(BuildContext context) {
String title = (ModalRoute.of(context)!.settings.arguments as Map)['desc'];
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: SingleChildScrollView(
child: Container(
alignment: Alignment.center,
child: Column(
children: [
Container(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
SizedBox(
width: 100,
height: 100,
child: Image.network(
'https://file03.16sucai.com/2017/1100/16sucai_p20161116082.JPG'),
),
ClipOval(
//将布局裁剪成圆形
child: SizedBox(
width: 100,
height: 100,
child: Image.network(
'https://file03.16sucai.com/2017/1100/16sucai_p20161116082.JPG'),
),
),
Padding(
padding: EdgeInsets.only(left: 10),
child: Opacity(
opacity: 0.5,
child: ClipOval(
//将布局裁剪成圆形
child: SizedBox(
width: 100,
height: 100,
child: Image.network(
'https://file03.16sucai.com/2017/1100/16sucai_p20161116082.JPG',
),
),
),
),
),
SizedBox(
height: 100,
width: 100,
child: ClipRRect(
borderRadius: BorderRadius.only(
topRight: Radius.circular(20),
bottomLeft: Radius.circular(20),
),
child: Image.network(
'https://file03.16sucai.com/2017/1100/16sucai_p20161116082.JPG',
),
),
)
],
),
),
),
Container(
color: Colors.white24,
padding: EdgeInsets.all(15),
height: 188,
child: PhysicalModel(
color: Colors.white12,
// borderRadius: BorderRadius.circular(25),
//borderRadius: BorderRadius.only(topLeft: Radius.circular(30)),
borderRadius: BorderRadius.all(Radius.circular(30)),
clipBehavior: Clip.hardEdge, //裁切模式 是否裁剪
child: PageView(
children: [
Container(
color: Colors.amber,
),
_Item(
title: "a",
color: Colors.red,
),
_Item(
title: "b",
color: Colors.yellowAccent,
),
_Item(
title: "c",
color: Colors.greenAccent,
)
],
),
),
),
Divider(
height: 20,
),
Container(
color: Color(0xffdddddd),
height: 2,
),
Column(
children: [
Container(
//alignment: Alignment.center,
decoration: BoxDecoration(color: Colors.greenAccent),
child: Text('宽度没有撑满'),
),
FractionallySizedBox(
widthFactor: 1,
child: Container(
// alignment: Alignment.center,
decoration: BoxDecoration(color: Colors.greenAccent),
child: Text(
'宽度撑满 FractionallySizedBox',
textAlign: TextAlign.center,
),
),
),
FractionallySizedBox(
widthFactor: 1,
child: Container(
height: 250,
color: Color(0xffdddddd),
child: Stack(
children: [
Positioned(
child: Image.network(
'https://pimg.vogue.com.cn/userfiles/201405/1401161954401.jpg',
width: 200,
),
),
Positioned(
right: 0,
bottom: 0,
child: ClipOval(
child: Image.network(
'https://i0.wp.com/my-cte.com/wp-content/uploads/2017/11/1120-1.jpg',
width: 80,
height: 80,
fit: BoxFit.cover,
),
),
),
Positioned(
left: 0,
bottom: 0,
child: ClipOval(
child: Image.network(
'https://p6.itc.cn/images01/20210805/a0fe69d264ca4efd989a79ae4bf91ffb.jpeg',
width: 80,
height: 80,
fit: BoxFit.cover,
),
),
)
],
),
),
),
],
),
Wrap(
spacing: 8, //水平间距
runSpacing: 6, //垂直间距
runAlignment: WrapAlignment.start,
children: [
_Chip(title: "666"),
_Chip(title: "中国人民万岁"),
_Chip(title: "世界人民大和平万岁"),
_Chip(title: "中国长江"),
_Chip(title: "中国长城"),
],
),
Row(
children: [
Text('列表'),
Expanded(
child: Container(
height: 100,
decoration: BoxDecoration(color: Colors.greenAccent),
child: Center(
child: Text(
'拉伸填满高度',
),
),
),
),
],
)
],
),
),
),
);
}
}
class _Chip extends StatelessWidget {
final String title;
_Chip({Key? key, required this.title}) : super(key: key);
@override
Widget build(BuildContext context) {
// TODO: implement build
return Chip(
label: Text(title),
// avatar: Icon(Icons.settings),
avatar: CircleAvatar(
backgroundColor: Colors.yellowAccent.withOpacity(0.7),
//backgroundColor: Colors.yellowAccent.shade50,
child: Text(title.substring(0, 1)),
),
);
}
}
class _Item extends StatelessWidget {
final String title;
final Color color;
_Item({Key? key, required this.title, required this.color}) : super(key: key);
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
child: Text(title),
color: color,
);
}
}