Skip to content

F
Flutter_app
提交 bae5664c 作者: 杨俊磊
操作

Container容器、Scaffold、TabBar、剪裁学习代码提交

上级 90444998
正在显示 包含 450 行增加 和 139 行删除
lib/yangjunlei/ClipDemo.dart 0 → 100644
import 'package:flutter/material.dart';
class ClipDemoPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
Widget imgLogo = Image.asset('images/icon_logo.png', width: 80);
return Scaffold(
appBar: AppBar(
title: Text('裁剪'),
),
body: Column(
children: <Widget>[
// 不裁剪
imgLogo,
// 裁剪为圆形
ClipOval(child: imgLogo,),
// 裁剪为圆角矩形
ClipRRect(
borderRadius: BorderRadius.circular(5.0),
child: imgLogo,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Align(
alignment: Alignment.topLeft,
widthFactor: 0.5,// 宽度设置为原来的一半，另一半会溢出
),
Text(
'Hello',
style: TextStyle(
color: Colors.red,
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// 将溢出部分裁剪
ClipRect(
child: Align(
alignment: Alignment.topLeft,
widthFactor: 0.5,
child: imgLogo,
),
),
Text(
'Hello World',
style: TextStyle(color: Colors.green),
),
],
),
DecoratedBox(
decoration: BoxDecoration(
color: Colors.red,
),
child: ClipRect(
clipper: MyClipTest(),
child: imgLogo,
),
),
],
),
);
}
}
// 自定义裁剪
class MyClipTest extends CustomClipper<Rect> {
@override
Rect getClip(Size size) => Rect.fromLTWH(10.0, 15.0, 40.0, 30.0);
@override
bool shouldReclip(CustomClipper<Rect> oldClipper) => false;
}
\ No newline at end of file
lib/yangjunlei/ContainerDemo.dart 0 → 100644
import 'package:flutter/material.dart';
class ContainerDemoPage extends StatefulWidget {
@override
_ContainerDemoPageState createState() => _ContainerDemoPageState();
}
class _ContainerDemoPageState extends State<ContainerDemoPage>{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Container 容器'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
// 容器外填充
margin: EdgeInsets.only(top:50.0, left: 120.0),
// 卡片大小
constraints: BoxConstraints.tightForFinite(width: 200.0, height: 100.0),
// 背景修饰
decoration: BoxDecoration(
// 背景径向渐变
gradient: RadialGradient(
colors: [Colors.red, Colors.orange],
center: Alignment.topLeft,
radius: .98,
),
// 卡片阴影
boxShadow: [
BoxShadow(
color: Colors.black54,
offset: Offset(2.0, 2.0),
blurRadius: 4.0,
),
]
),
// 卡片倾斜变换
transform: Matrix4.rotationZ(0.2),
alignment: Alignment.center,
child: Text(
'Hello World',
style: TextStyle(
color: Colors.white,
fontSize: 30.0,
),
),
)
],
),
);
}
}
\ No newline at end of file
lib/yangjunlei/PaddingDemo.dart 0 → 100644
import 'package:flutter/material.dart';
import 'dart:math' as math;
class PaddingDemoPage extends StatefulWidget {
@override
_TestDemoState createState() => _TestDemoState();
}
class _TestDemoState extends State<PaddingDemoPage>{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('填充 Padding'),
),
body: Container(
child: Column(
children: <Widget>[
Padding( // 填充 Padding
padding:EdgeInsets.all(16.0),
child: Column(
// 显示指定的对齐方式 为左对齐，排除对齐干扰
crossAxisAlignment: CrossAxisAlignment.start,
// mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(vertical: 8.0),
child: Text('Hello World',style: TextStyle(color: Colors.yellow),
),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 8.0),
child: Text('Hello World',style: TextStyle(color: Colors.green),
),
),
Padding(
// 分别指定四个方向的补白
padding: EdgeInsets.fromLTRB(20.0, 20.0, 20.0, 20.0),
child: Text('Hello World',style: TextStyle(color: Colors.red),),
),
],
),
),
// 尺寸限制容器
ConstrainedBox( // 用于对子组件添加额外的约束
constraints: BoxConstraints(
maxHeight: 30,
maxWidth: 300,
),
child: Container(
height: 50.0,
color: Colors.red,
),
),
SizedBox( // 用于给子元素指定固定的宽高
width:40.0,
height: 40.0,
child: Container(
color: Colors.green,
),
),
DecoratedBox( // 装饰容器 DecoratedBox
// 绘制装饰
decoration: BoxDecoration(
// 背景渐变
gradient: LinearGradient(colors: [Colors.red, Colors.orange[700]]),
// 像素圆角
borderRadius: BorderRadius.circular(5.0),
// 绘制阴影
boxShadow: [
BoxShadow(
color: Colors.black54,
offset: Offset(2.0, 2.0),
blurRadius: 4.0,
)
]
),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 80.0, vertical: 18.0),
child: Text('Hello World',style: TextStyle(color: Colors.white),),
),
),
// 4D矩阵
Container(
color: Colors.black,
child: Transform(
// 相对于坐标系原点的对齐方式
alignment: Alignment.bottomCenter,
// Matrix4是一个4D矩阵。沿Y轴倾斜0.3弧度
transform: Matrix4.skewY(0.3),
child: Container(
padding: EdgeInsets.all(8.0),
color: Colors.deepOrange,
child: Text('Transform'),
),
),
),
// 平移
DecoratedBox(
decoration: BoxDecoration(color: Colors.red),
// 接收一个offset参数，可以在绘制时沿x、y轴对子组件平移指定的距离
child: Transform.translate(offset: Offset(-20.0, -5.0), child: Text('Transform.'),),
),
// 旋转
DecoratedBox(
decoration: BoxDecoration(color: Colors.red),
child: Transform.rotate(angle: math.pi/2, child: Text('Transform.'),),
),
// 缩放
DecoratedBox(
decoration: BoxDecoration(color: Colors.red),
child: Transform.scale(scale: 5, child: Text('Transform.'),),
),
// 验证变换原理
// Text("你好", style: TextStyle(color: Colors.green, fontSize: 18.0),),
// RotatedBox
// RotatedBox和Transform.rotate功能相似，它们都可以对子组件进行旋转变换，
// 但是有一点不同：RotatedBox的变换是在layout阶段，会影响在子组件的位置和大小。
DecoratedBox(
decoration: BoxDecoration(color: Colors.red),
// 将Transform.rotate换成RotatedBox
child: RotatedBox(
// 旋转90度，四分之一圈
quarterTurns: 1,
child: Text('Transform.'),
),
),
// Text("你好", style: TextStyle(color: Colors.green, fontSize: 18.0),),
],
),
width: double.infinity,
height: double.infinity,
alignment: Alignment.center, // 让内部居中显示
decoration: BoxDecoration(
color: Colors.black,
),
),
);
}
}
lib/yangjunlei/ScaffoldDemo.dart 0 → 100644
import 'package:flutter/material.dart';
class ScaffoldDemoPage extends StatefulWidget {
@override
_ScaffoldRouteState createState() => _ScaffoldRouteState();
}
class _ScaffoldRouteState extends State<ScaffoldDemoPage> {
int _selectedIndex = 1;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar( //导航栏
title: Text("App Name"),
actions: <Widget>[ //导航栏右侧菜单
IconButton(icon: Icon(Icons.share), onPressed: () {}),
],
),
drawer: new MyDrawer(), //抽屉
bottomNavigationBar: BottomNavigationBar( // 底部导航
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
BottomNavigationBarItem(icon: Icon(Icons.business), title: Text('Business')),
BottomNavigationBarItem(icon: Icon(Icons.school), title: Text('School')),
],
currentIndex: _selectedIndex,
fixedColor: Colors.blue,
onTap: _onItemTapped,
),
floatingActionButton: FloatingActionButton( //悬浮按钮
child: Icon(Icons.add),
onPressed:_onAdd
),
);
}
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
void _onAdd(){
}
}
class MyDrawer extends StatelessWidget {
const MyDrawer({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Drawer(
child: MediaQuery.removePadding(
context: context,
//移除抽屉菜单顶部默认留白
removeTop: true,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 38.0),
child: Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: ClipOval(
child: Image.asset(
"images/icon_logo.png",
width: 80,
),
),
),
Text(
"用户名",
style: TextStyle(fontWeight: FontWeight.bold),
)
],
),
),
Expanded(
child: ListView(
children: <Widget>[
ListTile(
leading: const Icon(Icons.add),
title: const Text('我的收藏'),
),
ListTile(
leading: const Icon(Icons.wallpaper),
title: const Text('我的钱包'),
),
ListTile(
leading: const Icon(Icons.sd_card),
title: const Text('我的会员'),
),
],
),
),
],
),
),
);
}
}
\ No newline at end of file
lib/yangjunlei/yangjunlei.dart
import 'package:flutter/material.dart';
import 'dart:math' as math;
import 'package:flutterpro/yangjunlei/ContainerDemo.dart';
import 'package:flutterpro/yangjunlei/PaddingDemo.dart';
import 'package:flutterpro/yangjunlei/ClipDemo.dart';
import 'package:flutterpro/yangjunlei/ScaffoldDemo.dart';
class YangJunLei extends StatefulWidget {
@override
_TestDemoState createState() => _TestDemoState();
......@@ -9,133 +14,56 @@ class _TestDemoState extends State<YangJunLei>{
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('填充 Padding'),
title: Text('Demo 列表'),
),
body: Container(
child: Column(
children: <Widget>[
Padding( // 填充 Padding
padding:EdgeInsets.all(16.0),
child: Column(
// 显示指定的对齐方式 为左对齐，排除对齐干扰
crossAxisAlignment: CrossAxisAlignment.start,
// mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(vertical: 8.0),
child: Text('Hello World',style: TextStyle(color: Colors.yellow),
),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 8.0),
child: Text('Hello World',style: TextStyle(color: Colors.green),
),
),
Padding(
// 分别指定四个方向的补白
padding: EdgeInsets.fromLTRB(20.0, 20.0, 20.0, 20.0),
child: Text('Hello World',style: TextStyle(color: Colors.red),),
),
],
),
RaisedButton(
child: Text('填充 容器'),
onPressed: (){
Navigator.push(
context,
new MaterialPageRoute(builder: (context) => new PaddingDemoPage())
);
},
),
// 尺寸限制容器
ConstrainedBox( // 用于对子组件添加额外的约束
constraints: BoxConstraints(
maxHeight: 30,
maxWidth: 300,
RaisedButton(
child: Text('Container 容器'),
onPressed: (){
Navigator.push(
context,
new MaterialPageRoute(builder: (context) => new ContainerDemoPage())
);
},
),
child: Container(
height: 50.0,
RaisedButton(
child: Text('剪裁 Clip'),
color: Colors.red,
textColor: Colors.white,
onPressed: (){
Navigator.push(
context,
new MaterialPageRoute(builder: (context) => new ClipDemoPage())
);
},
),
RaisedButton(
child: Text('Scaffold 导航'),
onPressed: (){
Navigator.push(
context,
new MaterialPageRoute(builder: (context) => new ScaffoldDemoPage())
);
},
),
SizedBox( // 用于给子元素指定固定的宽高
width:40.0,
height: 40.0,
child: Container(
color: Colors.green,
),
),
DecoratedBox( // 装饰容器 DecoratedBox
// 绘制装饰
decoration: BoxDecoration(
// 背景渐变
gradient: LinearGradient(colors: [Colors.red, Colors.orange[700]]),
// 像素圆角
borderRadius: BorderRadius.circular(5.0),
// 绘制阴影
boxShadow: [
BoxShadow(
color: Colors.black54,
offset: Offset(2.0, 2.0),
blurRadius: 4.0,
)
]
),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 80.0, vertical: 18.0),
child: Text('Hello World',style: TextStyle(color: Colors.white),),
),
),
// 4D矩阵
Container(
color: Colors.black,
child: Transform(
// 相对于坐标系原点的对齐方式
alignment: Alignment.bottomCenter,
// Matrix4是一个4D矩阵。沿Y轴倾斜0.3弧度
transform: Matrix4.skewY(0.3),
child: Container(
padding: EdgeInsets.all(8.0),
color: Colors.deepOrange,
child: Text('Transform'),
),
),
),
// 平移
DecoratedBox(
decoration: BoxDecoration(color: Colors.red),
// 接收一个offset参数，可以在绘制时沿x、y轴对子组件平移指定的距离
child: Transform.translate(offset: Offset(-20.0, -5.0), child: Text('Transform.'),),
),
// 旋转
DecoratedBox(
decoration: BoxDecoration(color: Colors.red),
child: Transform.rotate(angle: math.pi/2, child: Text('Transform.'),),
),
// 缩放
DecoratedBox(
decoration: BoxDecoration(color: Colors.red),
child: Transform.scale(scale: 5, child: Text('Transform.'),),
),
// 验证变换原理
// Text("你好", style: TextStyle(color: Colors.green, fontSize: 18.0),),
// RotatedBox
// RotatedBox和Transform.rotate功能相似，它们都可以对子组件进行旋转变换，
// 但是有一点不同：RotatedBox的变换是在layout阶段，会影响在子组件的位置和大小。
DecoratedBox(
decoration: BoxDecoration(color: Colors.red),
// 将Transform.rotate换成RotatedBox
child: RotatedBox(
// 旋转90度，四分之一圈
quarterTurns: 1,
child: Text('Transform.'),
),
),
// Text("你好", style: TextStyle(color: Colors.green, fontSize: 18.0),),
],
),
width: double.infinity,
height: double.infinity,
alignment: Alignment.center, // 让内部居中显示
alignment: Alignment.topLeft, // 让内部居中显示
decoration: BoxDecoration(
color: Colors.black,
color: Colors.white,
),
),
);
......
pubspec.lock
......@@ -5,63 +5,63 @@ packages:
dependency: transitive
description:
name: archive
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "2.0.11"
args:
dependency: transitive
description:
name: args
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "1.5.2"
async:
dependency: transitive
description:
name: async
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "2.4.0"
boolean_selector:
dependency: transitive
description:
name: boolean_selector
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "1.0.5"
charcode:
dependency: transitive
description:
name: charcode
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "1.1.2"
collection:
dependency: transitive
description:
name: collection
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "1.14.11"
convert:
dependency: transitive
description:
name: convert
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "2.1.1"
crypto:
dependency: transitive
description:
name: crypto
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "2.1.3"
cupertino_icons:
dependency: "direct main"
description:
name: cupertino_icons
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "0.1.3"
flutter:
......@@ -78,49 +78,49 @@ packages:
dependency: transitive
description:
name: image
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "2.1.4"
matcher:
dependency: transitive
description:
name: matcher
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "0.12.6"
meta:
dependency: transitive
description:
name: meta
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "1.1.8"
path:
dependency: transitive
description:
name: path
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "1.6.4"
pedantic:
dependency: transitive
description:
name: pedantic
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "1.8.0+1"
petitparser:
dependency: transitive
description:
name: petitparser
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "2.4.0"
quiver:
dependency: transitive
description:
name: quiver
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "2.0.5"
sky_engine:
......@@ -132,63 +132,63 @@ packages:
dependency: transitive
description:
name: source_span
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "1.5.5"
stack_trace:
dependency: transitive
description:
name: stack_trace
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "1.9.3"
stream_channel:
dependency: transitive
description:
name: stream_channel
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "2.0.0"
string_scanner:
dependency: transitive
description:
name: string_scanner
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "1.0.5"
term_glyph:
dependency: transitive
description:
name: term_glyph
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "1.1.0"
test_api:
dependency: transitive
description:
name: test_api
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "0.2.11"
typed_data:
dependency: transitive
description:
name: typed_data
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "1.1.6"
vector_math:
dependency: transitive
description:
name: vector_math
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "2.0.8"
xml:
dependency: transitive
description:
name: xml
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "3.5.0"
sdks:
......
pubspec.yaml
......@@ -44,6 +44,7 @@ flutter:
- images/3.0x/time.png
- images/4.0x/time.png
- images/time.png
- images/icon_logo.png
# To add assets to your application, add an assets section, like this:
# assets:
# - images/a_dot_burr.jpeg
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论