Flutter组件的分类
- 文字类型
- 容器类型
- 辅助提示类型
- 列表类型
- 系统主题风格类型
- 交互类型
文字类型
用于描述文字，
如Text组件，一个普通的文本，
属性有字体的颜色、大小、下划线、删除线、加粗、字体风格等；
RichText组件，一个富文本，
可以描述丰富的字体样式；
案例如下：（Text的所有属性及相关的意义）
/// color 颜色
/// decoration 删除线
/// decorationColor 删除线颜色
/// decorationStyle 删除线样式
/// fontSize 大小
/// fontStyle 斜体
/// fontFamily 字体
/// fontWeight 字体粗细
/// height 跨度
/// letterSpacing 字母间隔
new Text(
'Text组件使用11111111111111111111111111hello-world11111111111111111111111111111end',
style: TextStyle(
color: const Color(0xffff0000),
// none 不显示装饰线条 underline 字体下方 overline 字体上方 lineThrough 穿过文字
decoration: TextDecoration.underline,
// solid 直线 double 双下划线 dotted 虚线 dashed 点下划线 wavy 波浪线
decorationStyle: TextDecorationStyle.wavy,
decorationColor: const Color(0xff00ee00),
// decorationColor: Colors.red,
//字体大小
fontSize: 15.0,
// normal 正常 italic 斜体
fontStyle: FontStyle.normal,
// monospace serif
fontFamily: 'serif',
// w100 - w900 normal(w400) bold(w700) 字体宽度
// fontWeight: FontWeight.bold,
fontWeight: FontWeight.w100,
//字体间隙
letterSpacing: 2.0,
//高度
height: 2,
),
// 段落的间距样式！！！！！！！！可以注释掉这一部分，看看效果！！！
strutStyle: StrutStyle(
fontFamily: 'serif',//字体，如果此属性没设置，则从fontFamilyFallback去找；
fontFamilyFallback: ['monospace', 'serif'],//字体集合，如果这两个都没设置，则使用系统默认
fontSize: 10.0,
height: 2,
leading: 2.0,//首字母到后面字母的倍数
fontWeight: FontWeight.w200,
fontStyle: FontStyle.normal,
forceStrutHeight: true,//是否强制设置间距和高度
debugLabel: 'text demo',//类似于 semanticsLabel！！！
),
textAlign: TextAlign.left,//居左
textDirection: TextDirection.ltr,//文字的方向
//用于配置国际化语言！！！
locale: Locale('zh_CN'),
// 软包裹 文字是否应该在软断行处断行
//软断行 指 文本中有英文横杆之类的，会自动软断行！！！！！
softWrap: false,
//文字超出显示区域时候，超出的部分怎么表示
// clip 裁剪 fade 淡入 ellipsis 省略号 visible 容器外也会渲染组件
overflow: TextOverflow.ellipsis,
//文字的缩放比例
textScaleFactor: 1.0,
//文字最多显示几行
maxLines: 2,
// 语义标签
semanticsLabel: 'text demo',
//文字的宽度的基准， longestLine 以文字的最长的线为基准
textWidthBasis: TextWidthBasis.parent,
),
容器类型
即容器组件，
可以承载一个内容的展示
new Container(
alignment: Alignment.center,//居中
padding: const EdgeInsets.all(50.0),
margin: const EdgeInsets.all(60.0),
//Container的宽高 的约束！！！！！
constraints: new BoxConstraints.expand(
height:
Theme.of(context).textTheme.display1.fontSize * 1.1 + 100.0,
),
//容器的宽高，子组件超过则显示不出来
width: 250.0,
height: 100.0,
//背景的装饰
decoration: buildBoxDecoration(),
//前景的装饰
// foregroundDecoration: buildBoxDecorations(),
child: new Text('容器演示'),
//绕Z轴旋转
transform: new Matrix4.rotationZ(0.1),
),
-------------------------------------------------
//返回Decoration对象
Decoration buildBoxDecoration() {
return new BoxDecoration(
color: const Color(0xfffce5cd),
//设置Border属性给容器添加边框
border: new Border.all(
//为边框添加颜色
color: const Color(0xff6d9eed),
//为边框宽度
width: 8.0,
)
);
}
Decoration buildBoxDecorations() {
return BoxDecoration(
color: const Color(0xfffce5cd),
//设置Border属性给容器添加边框
border: new Border.all(
//为边框添加颜色
color: Colors.red,
//为边框宽度
width: 8.0,
style: BorderStyle.solid
)
);
}
辅助提示类型
- RaisedButton
- BottomSheet【注意，可以自定义布局】
- SnackBar
RaisedButton(
onPressed: () {
//注意这里的context是BuildContext
Scaffold.of(context).showBottomSheet(
(BuildContext context) {
//这里可以是一个自定义的View Text组件亦可，Container亦可
return new Container(
//底部弹出文本框
child: Text('hello world1'),
width: 150,
height: 50,
);
},
//颜色
backgroundColor: Theme.of(context).primaryColor,
//高度值
elevation: 10,
//边角
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0)),
//防锯齿
clipBehavior: Clip.antiAlias,
);
// 生成一个 SnackBar
Scaffold.of(context).showSnackBar(SnackBar(content: Text('hello')));
},
child: Text('点击显示BottomSheet'),//按钮文本
color: Theme.of(context).primaryColor,//颜色
),
列表类型
- scrollDirection：
定义滑动的方向； - children: <Widget>[]：
子组件集； - Divider、VerticalDivider：【可以作为
<Widget>[]的元素】
分隔线；
new Divider(height: 1.0, color: Colors.grey),
// new VerticalDivider(width: 1.0, color: Colors.grey),
Text(
'${widget.counter}',
style: Theme.of(context).textTheme.display1,
),
-
ListTile 表头【官方封装组件，可以作为
ListView的<Widget>[]的元素，具有属性如下所示】
代码：
ListView(
// 列表滑动的方向
scrollDirection: Axis.vertical,
// scrollDirection: Axis.horizontal,
children: <Widget>[
ListTile(
//预览小图标
leading: new Icon(Icons.account_circle),
//标题
title: new Text(data),
//子标题
subtitle: new Text('简介'),
// 右边的图标
trailing: new Icon(Icons.chevron_right),
onTap: () {
print('点击事件：点击了 ListTile ==== title为：$data');
},
onLongPress: () {
print('长按事件：长按了 ListTile ==== title为：$data');
},
selected: true,
),
Text(
'${widget.counter}',
style: Theme.of(context).textTheme.display1,
),
Text(
'${widget.counter}',
style: Theme.of(context).textTheme.display1,
),
],
);
效果图：
点击或者长按，都可以看到对应的信息：
-
CheckboxListTile 【官方封装组件，
可以作为ListView的<Widget>[]的元素，
具有属性如下所示】
new CheckboxListTile(
value: isChecked,
//点击后的回调
onChanged: ((bool value) {
print('点击了CheckboxListTile ， 选中状态为： $value');
setState(() {
isChecked = !isChecked;
});
}),
title: new Text('相册'),
subtitle: new Text('相册的描述'),
//选中
selected: true,
//选中的颜色
activeColor: Colors.teal,
),
点击可看信息：
- SwitchListTile 【官方封装组件，
可以作为ListView的<Widget>[]的元素，
具有属性如下所示】
new SwitchListTile(
//选中状态值
value: isChecked2,
//点击后的回调
onChanged: ((bool value) {
print('点击了SwitchListTile ， 选中状态为： $value');
setState(() {
isChecked2 = !isChecked2;
});
}),
//主次标题
title: new Text('相册'),
subtitle: new Text(
'相册的描述。这是相册的描述。这是相册的描述。这是相册的描述。这是相册的描述。这是相册的描述。这是相册的描述。这是相册的描述。'),
//选中
selected: true,
//选中的颜色
activeColor: Colors.teal,
//左侧图标
secondary: new Icon(Icons.account_circle),
//文字过多时，是否三行显示
isThreeLine: true,
),
-
AboutListTile【官方封装组件，
可以作为ListView的<Widget>[]的元素，
具有属性如下所示】
new AboutListTile(
icon: new Icon(Icons.panorama),
//公司logo
applicationIcon: new FlutterLogo(),
//app名称
applicationName: '凌川江雪',
//app版本号
applicationVersion: 'V1.0.0',
//版权信息
applicationLegalese: '版权归XX科技有限公司所有...',
// child: ,//关于应用名
// aboutBoxChildren: <Widget>[],//更多信息
),
运行效果：
点击VIEW LICENSES 会跳转到一个默认的协议页面：
- ListView.builder：【ListView的另一种构建方式】
final List<int> colorDatas = <int>[
50,
100,
200,
300,
400,
500,
600,
700,
800,
900
];
@override
Widget build(BuildContext context) {
return ListView.builder(
padding: EdgeInsets.all(8.0),
//类似于onBindViewHolder，index类比position
// %10 是为了 颜色数据 可以在 colorDatas中循环读取
itemBuilder: (BuildContext context,int index){
return Icon(
Icons.image,
color: Colors.blue[colorDatas[index%10]],
size: 100,
);
},
itemCount: 20,
);
}
系统主题有关的组件 MaterialApp和AppBar详解
-
Main.dart中有一个
MaterialApp组件，
通过这个组件就可以实现很多Material风格的东西：theme：主题属性；
primaryColor：定义主题颜色；
primarySwatch：标题栏颜色；
主题颜色的运用：
-
Scaffold
Scaffold组件可以有的属性如下：
AppBar（title属性，Text组件； action：动作响应；！！！！ titleSpacing：标题文字间距； toolbarOpacity：标题透明度；）
floatingActionButtonLocation
floatingActionButton
实例1：
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
// title: new Text('目标页面'),
title: new Text(
'主页面传过来的数据： $data',
),
// backgroundColor: Colors.blue,
),
body: RaisedButton(
onPressed: () {
print('打开了目标页面');
Navigator.of(context).pop();
},
child: Text('返回上一个页面'),
),
// body: Contents(),
);
}
}
实例2：【main.dart】
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(
widget.title,
style: TextStyle(color: Theme.of(context).primaryColorDark),
),
toolbarOpacity: 1.0,
bottomOpacity: 1.0,
),
// 封装的 内容页面
body: ContentPage(counter),
//悬浮按钮的位置
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
//悬浮按钮组件
floatingActionButton: buildFloatingActionButtonExtends(),
); // This trailing comma makes auto-formatting nicer for build methods.
}
交互类型组件
- floatingActionButton
//悬浮按钮的位置
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
//悬浮按钮组件
floatingActionButton: buildFloatingActionButton(),
); // This trailing comma makes auto-formatting nicer for build methods.
--------------------------------------
FloatingActionButton buildFloatingActionButton() {
return FloatingActionButton(
//点击回调
onPressed: _incrementCounter,
//长按按钮的提示
tooltip: 'Increment',
//悬浮按钮的图标
child: Icon(Icons.add),
// icon图标和文字的颜色 默认：ThemeData.accentIconTheme.color
foregroundColor: Colors.red,
// 按钮的颜色 默认：ThemeData.accentColor
backgroundColor: Colors.yellow,
// 有输入焦点 按钮的颜色 默认：ThemeData.focusColor
focusColor: Colors.tealAccent,
// 指针悬停时 按钮的颜色 默认：ThemeData.hoverColor
hoverColor: Colors.white,
// 点击时的水波纹颜色 默认：如果为null，使用FloatingActionButtonThemeData.splashColor
// 如果FloatingActionButtonThemeData.splashColor 也为null,使用ThemeData.splashColor
splashColor: Colors.blue,
// Hero动画
heroTag: null,
// Z轴阴影大小 默认：6
elevation: 10.0,
// 有输入焦点的阴影大小
focusElevation: 50.0,
// 指针悬停时的阴影大小
hoverElevation: 50.0,
// 点击时的阴影大小
highlightElevation: 50.0,
// 按钮不可用时的阴影大小
disabledElevation: 10.0,
// 按钮尺寸：默认是56逻辑像素 如果为true就是48逻辑像素
mini: false,
//配置圆角弧度、形状
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
//防锯齿
clipBehavior: Clip.antiAlias,
focusNode: FocusNode(debugLabel: 'floating_action_button'),
autofocus: true,
// 配置组件到目标尺寸大小，默认值：ThemeData.materialTapTargetSize
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
isExtended: true,
);
}
- FloatingActionButton.extended
FloatingActionButton buildFloatingActionButtonExtends() {
return FloatingActionButton.extended(
//点击回调
onPressed: _incrementCounter,
//长按按钮的提示
tooltip: 'Increment',
//悬浮按钮的图标
// icon: Icon(Icons.add),
icon: Icon(Icons.done),
label: new Text('呵呵哒，呵呵呵哒'),
// icon图标和文字的颜色 默认：ThemeData.accentIconTheme.color
foregroundColor: Colors.red,
// 按钮的颜色 默认：ThemeData.accentColor
backgroundColor: Colors.yellow,
// 有输入焦点 按钮的颜色 默认：ThemeData.focusColor
focusColor: Colors.tealAccent,
// 指针悬停时 按钮的颜色 默认：ThemeData.hoverColor
hoverColor: Colors.white,
// 点击时的水波纹颜色 默认：如果为null，使用FloatingActionButtonThemeData.splashColor
// 如果FloatingActionButtonThemeData.splashColor 也为null,使用ThemeData.splashColor
splashColor: Colors.blue,
// Hero动画
heroTag: null,
// Z轴阴影大小 默认：6
elevation: 10.0,
// 有输入焦点的阴影大小
focusElevation: 50.0,
// 指针悬停时的阴影大小
hoverElevation: 50.0,
// 点击时的阴影大小
highlightElevation: 50.0,
// 按钮不可用时的阴影大小
disabledElevation: 10.0,
//配置圆角弧度、形状
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
//防锯齿
clipBehavior: Clip.antiAlias,
focusNode: FocusNode(debugLabel: 'floating_action_button'),
autofocus: true,
// 配置组件到目标尺寸大小，默认值：ThemeData.materialTapTargetSize
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
isExtended: true,
);
}
- main.dart
import 'package:flutter/material.dart';
import 'ContentPage.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
// primarySwatch: Colors.yellow,
primaryColor: Colors.teal,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.
// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int counter = 0;
void _incrementCounter() {
setState(() {
// This call to setState tells the Flutter framework that something has
// changed in this State, which causes it to rerun the build method below
// so that the display can reflect the updated values. If we changed
// _counter without calling setState(), then the build method would not be
// called again, and so nothing would appear to happen.
counter++;
});
}
@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(
widget.title,
style: TextStyle(color: Theme.of(context).primaryColorDark),
),
toolbarOpacity: 1.0,
bottomOpacity: 1.0,
),
// 封装的 内容页面
body: ContentPage(counter),
//悬浮按钮的位置
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
//悬浮按钮组件
floatingActionButton: buildFloatingActionButtonExtends(),
); // This trailing comma makes auto-formatting nicer for build methods.
}
FloatingActionButton buildFloatingActionButtonExtends() {
return FloatingActionButton.extended(
//点击回调
onPressed: _incrementCounter,
//长按按钮的提示
tooltip: 'Increment',
//悬浮按钮的图标
// icon: Icon(Icons.add),
icon: Icon(Icons.done),
label: new Text('呵呵哒，呵呵呵哒'),
// icon图标和文字的颜色 默认：ThemeData.accentIconTheme.color
foregroundColor: Colors.red,
// 按钮的颜色 默认：ThemeData.accentColor
backgroundColor: Colors.yellow,
// 有输入焦点 按钮的颜色 默认：ThemeData.focusColor
focusColor: Colors.tealAccent,
// 指针悬停时 按钮的颜色 默认：ThemeData.hoverColor
hoverColor: Colors.white,
// 点击时的水波纹颜色 默认：如果为null，使用FloatingActionButtonThemeData.splashColor
// 如果FloatingActionButtonThemeData.splashColor 也为null,使用ThemeData.splashColor
splashColor: Colors.blue,
// Hero动画
heroTag: null,
// Z轴阴影大小 默认：6
elevation: 10.0,
// 有输入焦点的阴影大小
focusElevation: 50.0,
// 指针悬停时的阴影大小
hoverElevation: 50.0,
// 点击时的阴影大小
highlightElevation: 50.0,
// 按钮不可用时的阴影大小
disabledElevation: 10.0,
//配置圆角弧度、形状
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
//防锯齿
clipBehavior: Clip.antiAlias,
focusNode: FocusNode(debugLabel: 'floating_action_button'),
autofocus: true,
// 配置组件到目标尺寸大小，默认值：ThemeData.materialTapTargetSize
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
isExtended: true,
);
}
// FloatingActionButton buildFloatingActionButton() {
// return FloatingActionButton(
// //点击回调
// onPressed: _incrementCounter,
// //长按按钮的提示
// tooltip: 'Increment',
// //悬浮按钮的图标
// child: Icon(Icons.add),
// // icon图标和文字的颜色 默认：ThemeData.accentIconTheme.color
// foregroundColor: Colors.red,
// // 按钮的颜色 默认：ThemeData.accentColor
// backgroundColor: Colors.yellow,
// // 有输入焦点 按钮的颜色 默认：ThemeData.focusColor
// focusColor: Colors.tealAccent,
// // 指针悬停时 按钮的颜色 默认：ThemeData.hoverColor
// hoverColor: Colors.white,
// // 点击时的水波纹颜色 默认：如果为null，使用FloatingActionButtonThemeData.splashColor
// // 如果FloatingActionButtonThemeData.splashColor 也为null,使用ThemeData.splashColor
// splashColor: Colors.blue,
// // Hero动画
// heroTag: null,
// // Z轴阴影大小 默认：6
// elevation: 10.0,
// // 有输入焦点的阴影大小
// focusElevation: 50.0,
// // 指针悬停时的阴影大小
// hoverElevation: 50.0,
// // 点击时的阴影大小
// highlightElevation: 50.0,
// // 按钮不可用时的阴影大小
// disabledElevation: 10.0,
// // 按钮尺寸：默认是56逻辑像素 如果为true就是48逻辑像素
// mini: false,
// //配置圆角弧度、形状
// shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
// //防锯齿
// clipBehavior: Clip.antiAlias,
// focusNode: FocusNode(debugLabel: 'floating_action_button'),
// autofocus: true,
// // 配置组件到目标尺寸大小，默认值：ThemeData.materialTapTargetSize
// materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
// isExtended: true,
// );
// }
// 注意：BoxDecoration返回的是Decoration对象
Decoration buildBoxDecoration() {
return new BoxDecoration(
color: const Color(0xfffce5cd),
//设置Border属性给容器添加边框
border: new Border.all(
//为边框添加颜色
color: const Color(0xff6d9eeb),
//边框宽度
width: 8.0,
),
);
}
Decoration buildBoxDecorations() {
return BoxDecoration(
color: Colors.blue,
border: Border.all(
color: Colors.red,
width: 10.0,
style: BorderStyle.solid,
),
);
}
}
- ContentPage.dart
import 'package:flutter/material.dart';
class ContentPage extends StatefulWidget {
ContentPage(this.counter);
int counter = 0;
@override
_ContentPageState createState() => _ContentPageState();
}
class _ContentPageState extends State<ContentPage> {
@override
Widget build(BuildContext context) {
// 使用Column
// return Center(
// // Center is a layout widget. It takes a single child and positions it
// // in the middle of the parent.
// Column组件是不可拓展的
// child: Column(
// // Column is also a layout widget. It takes a list of children and
// // arranges them vertically. By default, it sizes itself to fit its
// // children horizontally, and tries to be as tall as its parent.
// //
// // Invoke "debug painting" (press "p" in the console, choose the
// // "Toggle Debug Paint" action from the Flutter Inspector in Android
// // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
// // to see the wireframe for each widget.
// //
// // Column has various properties to control how it sizes itself and
// // how it positions its children. Here we use mainAxisAlignment to
// // center the children vertically; the main axis here is the vertical
// // axis because Columns are vertical (the cross axis would be
// // horizontal).
// mainAxisAlignment: MainAxisAlignment.center,
// children: <Widget>[
// Text(
// 'You have pushed the button this many times:',
// ),
// Text(
// '${widget.counter}',
// style: Theme.of(context).textTheme.display1,
// ),
//
// /// color 颜色
// /// decoration 删除线
// /// decorationColor 删除线颜色
// /// decorationStyle 删除线样式
// /// fontSize 大小
// /// fontStyle 斜体
// /// fontFamily 字体
// /// fontWeight 字体粗细
// /// height 跨度
// /// letterSpacing 字母间隔
// // new Text(
// // 'Text组件使用11111111111111111111111111hello-world11111111111111111111111111111end',
// // style: TextStyle(
// // color: const Color(0xffff0000),
// // // none 不显示装饰线条 underline 字体下方 overline 字体上方 lineThrough 穿过文字
// // decoration: TextDecoration.underline,
// // // solid 直线 double 双下划线 dotted 虚线 dashed 点下划线 wavy 波浪线
// // decorationStyle: TextDecorationStyle.wavy,
// // decorationColor: const Color(0xff00ff00),
// // // decorationColor: Colors.red,
// // fontSize: 25.0,
// // // normal 正常 italic 斜体
// // fontStyle: FontStyle.normal,
// // // monospace serif
// // fontFamily: 'serif',
// // // w100 - w900 normal(w400) bold(w700)
// // fontWeight: FontWeight.bold,
// // letterSpacing: 5.0,
// // height: 2,
// // ),
// // // 段落的间距样式
// // strutStyle: StrutStyle(
// // fontFamily: 'serif',
// // fontFamilyFallback: ['monospace', 'serif'],
// // fontSize: 25.0,
// // height: 2,
// // leading: 2.0,
// // fontWeight: FontWeight.w200,
// // fontStyle: FontStyle.normal,
// // forceStrutHeight: true,
// // debugLabel: 'text demo',
// // ),
// // textAlign: TextAlign.left,
// // textDirection: TextDirection.ltr,
// // locale: Locale('zh_CN'),
// // // 软包裹 文字是否应该在软断行处断行
// // softWrap: false,
// // //clip 裁剪 fade 淡入 ellipsis 省略号 visible 容器外也会渲染组件
// // overflow: TextOverflow.ellipsis,
// // textScaleFactor: 1.0,
// // maxLines: 3,
// // // 语义标签
// // semanticsLabel: 'text demo',
// // textWidthBasis: TextWidthBasis.longestLine,
// // ),
//
// /// Container介绍
// // alignment
// // padding
// // margin
// // constraints
// // width
// // height
// // decoration
// // foregroundDecoration
// // child
// // transform
// // new Container(
// // alignment: Alignment.center,
// // padding: const EdgeInsets.all(8.0),
// // margin: const EdgeInsets.all(8.0),
// // constraints: new BoxConstraints.expand(
// // height:
// // Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
// // ),
// // width: 300.0,
// // height: 200.0,
// // decoration: buildBoxDecoration(),
// //// foregroundDecoration: buildBoxDecorations(),
// // child: new Text('容器演示'),
// // transform: new Matrix4.rotationZ(0.2),
// // ),
//
// RaisedButton(
// onPressed: () {
// Scaffold.of(context).showBottomSheet(
// (BuildContext context) {
// return new Container(
// child: Text('hello world1'),
// width: 300,
// height: 100,
// );
// },
// backgroundColor: Theme.of(context).primaryColor,
// elevation: 10,
// shape: RoundedRectangleBorder(
// borderRadius: BorderRadius.circular(5.0)),
// clipBehavior: Clip.antiAlias,
// );
// Scaffold.of(context)
// .showSnackBar(SnackBar(content: Text('hello')));
// },
// child: Text('点击显示BottomSheet'),
// color: Theme.of(context).primaryColor,
// ),
// ],
// ),
// );
// 使用 ListView
return buildListViews(widget.counter);
}
}
class buildListViews extends StatefulWidget {
buildListViews(this.counter);
int counter = 0;
@override
buildListViewsState createState() => new buildListViewsState();
}
class buildListViewsState extends State<buildListViews> {
String data = '联系人';
bool isChecked = false;
bool isChecked2 = false;
final List<int> colorDatas = <int>[
50,
100,
200,
300,
400,
500,
600,
700,
800,
900
];
@override
Widget build(BuildContext context) {
return ListView.builder(
padding: EdgeInsets.all(8.0),
//类似于onBindViewHolder，index类比position
// %10 是为了 颜色数据 可以在 colorDatas中循环读取
itemBuilder: (BuildContext context,int index){
return Icon(
Icons.image,
color: Colors.blue[colorDatas[index%10]],
size: 100,
);
},
itemCount: 20,
);
}
// @override
// Widget build(BuildContext context) {
// return ListView(
// // 列表滑动的方向
// scrollDirection: Axis.vertical,
// // scrollDirection: Axis.horizontal,
// children: <Widget>[
//// Text(
//// 'You have pushed the button this many times:',
//// ),
////
//// new Divider(height: 1.0, color: Colors.grey),
//// // new VerticalDivider(width: 1.0, color: Colors.grey),
//// Text(
//// '${widget.counter}',
//// style: Theme.of(context).textTheme.display1,
//// ),
//// //分隔线
//// new Divider(height: 1.0, color: Colors.grey),
//// // new VerticalDivider(width: 1.0, color: Colors.grey),
//// Text(
//// '${widget.counter}',
//// style: Theme.of(context).textTheme.display1,
//// ),
//// new Divider(height: 1.0, color: Colors.grey),
// // new VerticalDivider(width: 1.0, color: Colors.grey),
//// ListTile(
//// //预览小图标
//// leading: new Icon(Icons.account_circle),
//// //标题
//// title: new Text(data),
//// //子标题
//// subtitle: new Text('简介'),
//// // 右边的图标
//// trailing: new Icon(Icons.chevron_right),
//// onTap: () {
//// print('点击事件：点击了 ListTile ==== title为：$data');
//// },
//// onLongPress: () {
//// print('长按事件：长按了 ListTile ==== title为：$data');
//// },
//// selected: true,
//// ),
//// new CheckboxListTile(
//// value: isChecked,
//// //点击后的回调
//// onChanged: ((bool value) {
//// print('点击了CheckboxListTile ， 选中状态为： $value');
//// setState(() {
//// isChecked = !isChecked;
//// });
//// }),
//// title: new Text('相册'),
//// subtitle: new Text('相册的描述'),
//// //选中
//// selected: true,
//// //选中的颜色
//// activeColor: Colors.teal,
//// ),
//
//// new SwitchListTile(
//// //选中状态值
//// value: isChecked2,
//// //点击后的回调
//// onChanged: ((bool value) {
//// print('点击了SwitchListTile ， 选中状态为： $value');
//// setState(() {
//// isChecked2 = !isChecked2;
//// });
//// }),
//// //主次标题
//// title: new Text('相册'),
//// subtitle: new Text(
//// '相册的描述。这是相册的描述。这是相册的描述。这是相册的描述。这是相册的描述。这是相册的描述。这是相册的描述。这是相册的描述。'),
//// //选中
//// selected: true,
//// //选中的颜色
//// activeColor: Colors.teal,
//// //左侧图标
//// secondary: new Icon(Icons.account_circle),
//// //文字过多时，是否三行显示
//// isThreeLine: true,
//// ),
//
//// new AboutListTile(
//// icon: new Icon(Icons.panorama),
//// //公司logo
//// applicationIcon: new FlutterLogo(),
//// //app名称
//// applicationName: '凌川江雪',
//// //app版本号
//// applicationVersion: 'V1.0.0',
//// //版权信息
//// applicationLegalese: '版权归XX科技有限公司所有...',
//// // child: ,//关于应用名
//// // aboutBoxChildren: <Widget>[],//更多信息
//// ),
//
//// Text(
//// '${widget.counter}',
//// style: Theme.of(context).textTheme.display1,
//// ),
//// Text(
//// '${widget.counter}',
//// style: Theme.of(context).textTheme.display1,
//// ),
//// Text(
////// '${widget.counter}',
////// style: Theme.of(context).textTheme.display1,
////// ),
////// Text(
////// '${widget.counter}',
////// style: Theme.of(context).textTheme.display1,
////// ),
////// Text(
////// '${widget.counter}',
////// style: Theme.of(context).textTheme.display1,
////// ),
//// Text(
//// '${widget.counter}',
//// style: Theme.of(context).textTheme.display1,
//// ),
//// Text(
//// '${widget.counter}',
//// style: Theme.of(context).textTheme.display1,
//// ),
//// Text(
//// '${widget.counter}',
//// style: Theme.of(context).textTheme.display1,
//// ),
//// Text(
//// '${widget.counter}',
//// style: Theme.of(context).textTheme.display1,
//// ),
//// Text(
//// '${widget.counter}',
//// style: Theme.of(context).textTheme.display1,
//// ),
//// Text(
//// '${widget.counter}',
//// style: Theme.of(context).textTheme.display1,
//// ),
// /// color 颜色
// /// decoration 删除线
// /// decorationColor 删除线颜色
// /// decorationStyle 删除线样式
// /// fontSize 大小
// /// fontStyle 斜体
// /// fontFamily 字体
// /// fontWeight 字体粗细
// /// height 跨度
// /// letterSpacing 字母间隔
//// new Text(
//// 'Text组件使用11111111111111111111111111hello-world11111111111111111111111111111end',
//// style: TextStyle(
//// color: const Color(0xffff0000),
//// // none 不显示装饰线条 underline 字体下方 overline 字体上方 lineThrough 穿过文字
//// decoration: TextDecoration.underline,
//// // solid 直线 double 双下划线 dotted 虚线 dashed 点下划线 wavy 波浪线
//// decorationStyle: TextDecorationStyle.wavy,
//// decorationColor: const Color(0xff00ee00),
////// decorationColor: Colors.red,
//// //字体大小
//// fontSize: 15.0,
//// // normal 正常 italic 斜体
//// fontStyle: FontStyle.normal,
//// // monospace serif
//// fontFamily: 'serif',
//// // w100 - w900 normal(w400) bold(w700) 字体宽度
////// fontWeight: FontWeight.bold,
//// fontWeight: FontWeight.w100,
//// //字体间隙
//// letterSpacing: 2.0,
//// //高度
//// height: 2,
//// ),
////
//// // 段落的间距样式！！！！！！！！可以注释掉这一部分，看看效果！！！
//// strutStyle: StrutStyle(
//// fontFamily: 'serif',//字体，如果此属性没设置，则从fontFamilyFallback去找；
//// fontFamilyFallback: ['monospace', 'serif'],//字体集合，如果这两个都没设置，则使用系统默认
//// fontSize: 10.0,
//// height: 2,
//// leading: 2.0,//首字母到后面字母的倍数
//// fontWeight: FontWeight.w200,
//// fontStyle: FontStyle.normal,
//// forceStrutHeight: true,//是否强制设置间距和高度
//// debugLabel: 'text demo',//类似于 semanticsLabel！！！
//// ),
////
//// textAlign: TextAlign.left,//居左
//// textDirection: TextDirection.ltr,//文字的方向
//// //用于配置国际化语言！！！
//// locale: Locale('zh_CN'),
//// // 软包裹 文字是否应该在软断行处断行
//// //软断行 指 文本中有英文横杆之类的，会自动软断行！！！！！
//// softWrap: false,
//// //文字超出显示区域时候，超出的部分怎么表示
//// // clip 裁剪 fade 淡入 ellipsis 省略号 visible 容器外也会渲染组件
//// overflow: TextOverflow.ellipsis,
//// //文字的缩放比例
//// textScaleFactor: 1.0,
//// //文字最多显示几行
//// maxLines: 2,
//// // 语义标签
//// semanticsLabel: 'text demo',
//// //文字的宽度的基准， longestLine 以文字的最长的线为基准
//// textWidthBasis: TextWidthBasis.parent,
//// ),
//
//// / Container介绍
//// alignment
//// padding
//// margin
//// constraints
//// width
//// height
//// decoration
//// foregroundDecoration
//// child
//// transform
//// new Container(
//// alignment: Alignment.center,//居中
//// padding: const EdgeInsets.all(50.0),
//// margin: const EdgeInsets.all(60.0),
//// //Container的宽高 的约束！！！！！
//// constraints: new BoxConstraints.expand(
//// height:
//// Theme.of(context).textTheme.display1.fontSize * 1.1 + 100.0,
//// ),
//// //容器的宽高，子组件超过则显示不出来
//// width: 250.0,
//// height: 100.0,
//// //背景的装饰
//// decoration: buildBoxDecoration(),
//// //前景的装饰
////// foregroundDecoration: buildBoxDecorations(),
//// child: new Text('容器演示'),
//// //绕Z轴旋转
//// transform: new Matrix4.rotationZ(0.1),
//// ),
//
//// RaisedButton(
//// onPressed: () {
//// //注意这里的context是BuildContext
//// Scaffold.of(context).showBottomSheet(
//// (BuildContext context) {
//// //这里可以是一个自定义的View Text组件亦可，Container亦可
//// return new Container(
//// //底部弹出文本框
//// child: Text('hello world1'),
//// width: 150,
//// height: 50,
//// );
//// },
//// //颜色
//// backgroundColor: Theme.of(context).primaryColor,
//// //高度值
//// elevation: 10,
//// //边角
//// shape: RoundedRectangleBorder(
//// borderRadius: BorderRadius.circular(5.0)),
//// //防锯齿
//// clipBehavior: Clip.antiAlias,
//// );
////
//// // 生成一个 SnackBar
//// Scaffold.of(context).showSnackBar(SnackBar(content: Text('hello')));
//// },
//// child: Text('点击显示BottomSheet'),//按钮文本
//// color: Theme.of(context).primaryColor,//颜色
//// ),
// ],
// );
// }
//返回Decoration对象
Decoration buildBoxDecoration() {
return new BoxDecoration(
color: const Color(0xfffce5cd),
//设置Border属性给容器添加边框
border: new Border.all(
//为边框添加颜色
color: const Color(0xff6d9eed),
//为边框宽度
width: 8.0,
)
);
}
Decoration buildBoxDecorations() {
return BoxDecoration(
color: const Color(0xfffce5cd),
//设置Border属性给容器添加边框
border: new Border.all(
//为边框添加颜色
color: Colors.red,
//为边框宽度
width: 8.0,
style: BorderStyle.solid
)
);
}
@override
void initState() {
// TODO: implement initState
super.initState();
}
@override
void dispose() {
// TODO: implement dispose
super.dispose();
}
}
网友评论