Flutter常用控件
1.富文本控件
class richText extends StatelessWidget {
const richText({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Text.rich(TextSpan(
children: [
TextSpan( text: "hello world",
style: TextStyle(
fontSize: 20,
color: Colors.red
)
),
WidgetSpan(child: Icon(Icons.favorite,color: Colors.amber,)),
TextSpan( text: "hello world",
style: TextStyle(
fontSize: 20,
color: Colors.green
)
)
],
)
);
}
}
2.文本控件
class TextWidget extends StatelessWidget {
const TextWidget({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Text("阿是大\n法官寒假大萨达撒撒的撒多萨达多\n撒多撒多快乐",
style: TextStyle(
fontSize: 30,
color: Colors.red
),
textAlign: TextAlign.center,);
}
}
3.按钮控件
class _HomeBodyState extends State<HomeBody> {
@override
Widget build(BuildContext context) {
return Column(
children:<Widget> [
//1.凸起
ElevatedButton(onPressed: ()=>null, child: Icon(Icons.add)),
//2.平整
FlatButton(onPressed: ()=>null,color: Colors.amberAccent, child: Icon(Icons.add)),
//
OutlineButton(onPressed: ()=>null,color: Colors.red,focusColor:Colors.red,child: Icon(Icons.add),),
TextButton.icon(onPressed: ()=>null, icon: Icon(Icons.add), label: Text("label")),
FlatButton(onPressed: ()=>null, color: Colors.orange,child: Row(
children: [
Icon(Icons.add),
Text("点击")
],
))
],
);
}
}
4.Listview列表控件
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return MaterialApp(
title:'QGS Flutter',
home:Scaffold(
appBar:new AppBar(
title:new Text('ListView Widget')
),
body: new ListView(
children:<Widget>[
new ListTile(
leading:new Icon(Icons.access_time),
title:new Text('access_time')
),
new ListTile(
leading:new Icon(Icons.access_time),
title:new Text('access_time')
),
new ListTile(
leading:new Icon(Icons.access_time),
title:new Text('access_time')
)
]
)
),
);
}
}
5.下拉框
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return MaterialApp(
title:'QGS Flutter',
home: Scaffold(
body:ChooseContent(),
)
);
}
}
class ChooseContent extends StatefulWidget {
const ChooseContent({Key? key}) : super(key: key);
@override
_ChooseContent createState() => _ChooseContent();
}
class _ChooseContent extends State<ChooseContent> {
var _selectType ;
@override
Widget build(BuildContext context) {
return
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
new Container(
height: 35,
width: MediaQuery.of(context).size.width - 140,
decoration: BoxDecoration(
border:Border(bottom:BorderSide(width: 1,color: Color(0xffe5e5e5)) )
),
child: new DropdownButtonHideUnderline(
child: new DropdownButton(
items: [
new DropdownMenuItem(
child: new Text('同意'),
value: '同意',
),
new DropdownMenuItem(
child: new Text('拒绝'),
value: '拒绝',
),
],
hint: new Text('请选择'),
onChanged: (value){
setState(() {
_selectType = value;
});
},
// isExpanded: true,
value: _selectType,
elevation: 24,//设置阴影的高度
style: new TextStyle(//设置文本框里面文字的样式
color: Color(0xff4a4a4a),
fontSize: 12,
),
// isDense: false,//减少按钮的高度。默认情况下,此按钮的高度与其菜单项的高度相同。如果isDense为true,则按钮的高度减少约一半。 这个当按钮嵌入添加的容器中时,非常有用
iconSize: 40.0,
)
)
),
],
);
}
}
Textfiled控件
Container(
padding: EdgeInsets.all(8),
width: 300,
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
///设置边框四个角的弧度
borderRadius: BorderRadius.all(Radius.circular(10)),
///用来配置边框的样式
borderSide: BorderSide(
///设置边框的颜色
color: Colors.red,
///设置边框的粗细
width: 1.0,
),
),
)),
),
Flutter控件使用简单demo(屏幕自适应宽高,循环生成下拉按钮)
import 'dart:ffi';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '排胶进炉',
home: Scaffold(
appBar: AppBar(
title: Text("排胶进炉"),
),
body: ChooseContentr(),
));
}
}
List<DropdownMenuItem<String>> dr = [];
class ChooseContentr extends StatelessWidget {
const ChooseContentr({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return ChooseContent();
}
}
class ChooseContent extends StatefulWidget {
const ChooseContent({Key? key}) : super(key: key);
@override
_ChooseContent createState() => _ChooseContent();
}
class _ChooseContent extends State<ChooseContent> {
var _selectType;
List<DropdownMenuItem> j = fuck() ;
@override
Widget build(BuildContext context) {
ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: false);
return
Container(
// 防止被软键盘遮挡,最外层加Container里嵌套SingleChildScrollView
child: SingleChildScrollView(
child: Column(
children: [
Row(
// crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.all(8),
width:ScreenUtil().setWidth(500).toDouble(),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
///设置边框四个角的弧度
borderRadius: BorderRadius.all(Radius.circular(10)),
///用来配置边框的样式
borderSide: BorderSide(
///设置边框的颜色
color: Colors.red,
///设置边框的粗细
width: 1.0,
),
),
)),
),
SizedBox(
width: 8,
),
OutlineButton(
onPressed: () => null,
child: Text("扫描工单"),
),
],
),
Row(
children: [
info(),
Text(
"互检人:", style: TextStyle(
fontSize: 15,
),
),
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.black26),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
padding: EdgeInsets.all(8),
child: new DropdownButtonHideUnderline(
child: new DropdownButton(
items: dr,
hint: new Text('互检人'),
onChanged: (value) {
setState(() {
_selectType = value;
print(_selectType);
});
},
// isExpanded: true,
value: _selectType,
elevation: 24,
//设置阴影的高度
style: new TextStyle( //设置文本框里面文字的样式
color: Color(0xff4a4a4a),
fontSize: 15,
),
// isDense: false,//减少按钮的高度。默认情况下,此按钮的高度与其菜单项的高度相同。如果isDense为true,则按钮的高度减少约一半。 这个当按钮嵌入添加的容器中时,非常有用
iconSize: 40.0,
//重点在这里,因为用编辑器写Column生成的children后面会跟一个<Widget>[],
//此时如果我们直接把生成的tiles放在<Widget>[]中是会报一个类型不匹配的错误,把<Widget>[]删了就可以了
),
)
),
],
),
Row(
children: [
info2(),
info2(),
],
),
Row(
children: [
info2(),
info2(),
],
),
Row(
children: [
Text("摆放位置:"),
info3(),
Text("栋"),
info4(),
],
),
Container(
height: 150,
child: ListView(
children:
List.generate(4, (index) {
return Container(
height: 50,
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border.all(color: Colors.red),
),
child: Text("第${index + 1}栋:${index}层"),
);
}),
)),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(width: 10),
OutlineButton(onPressed: () => null,
color: Colors.red,
focusColor: Colors.red,
child: Text("暂存"),),
OutlineButton(onPressed: () => null,
color: Colors.red,
focusColor: Colors.red,
child: Text("保存"),),
SizedBox(width: 10),
],
),
],
),
),
);
}
}
class info extends StatelessWidget {
const info({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(8),
width:ScreenUtil().setWidth(350).toDouble(),
child: TextField(
decoration: InputDecoration(
labelText: "进炉人",
border: OutlineInputBorder(
///设置边框四个角的弧度
borderRadius: BorderRadius.all(Radius.circular(10)),
///用来配置边框的样式
borderSide: BorderSide(
///设置边框的颜色
color: Colors.red,
///设置边框的粗细
width: 1.0,
),
),
)),
);
}
}
var message = "光芒胜过夜晚繁星";
class info2 extends StatelessWidget {
TextEditingController _textEditingController = new TextEditingController();
@override
Widget build(BuildContext context) {
this._textEditingController.text = message;
return Container(
padding: EdgeInsets.all(8),
width:ScreenUtil().setWidth(350).toDouble(),
child: TextField(
controller: _textEditingController,
readOnly: true,
decoration: InputDecoration(
labelText: "信息",
border: OutlineInputBorder(
///设置边框四个角的弧度
borderRadius: BorderRadius.all(Radius.circular(10)),
///用来配置边框的样式
borderSide: BorderSide(
///设置边框的颜色
color: Colors.red,
///设置边框的粗细
width: 1.0,
),
),
)),
);
}
}
TextEditingController _textEditingController = new TextEditingController();
class info4 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(20),
width:ScreenUtil().setWidth(350).toDouble(),
child: TextField(
controller: _textEditingController,
keyboardType: TextInputType.number,
decoration: InputDecoration(
labelText: "层",
border: OutlineInputBorder(
///设置边框四个角的弧度
borderRadius: BorderRadius.all(Radius.circular(10)),
///用来配置边框的样式
borderSide: BorderSide(
///设置边框的颜色
color: Colors.red,
///设置边框的粗细
width: 1.0,
),
),
)),
);
}
}
var _selectSide;
class info3 extends StatefulWidget {
@override
_info3State createState() => _info3State();
}
class _info3State extends State<info3> {
TextEditingController _textEditingController = new TextEditingController();
@override
Widget build(BuildContext context) {
this._textEditingController.text = message;
return Container(
padding: EdgeInsets.all(8),
width:ScreenUtil().setWidth(200).toDouble(),
child: new DropdownButtonHideUnderline(
child: new DropdownButton(
items: [
new DropdownMenuItem(
child: new Text('1'),
value: '1',
),
new DropdownMenuItem(
child: new Text('2'),
value: '2',
),
new DropdownMenuItem(
child: new Text('3'),
value: '3',
),
new DropdownMenuItem(
child: new Text('4'),
value: '4',
),
],
hint: new Text('请选择'),
onChanged: (value) {
setState(() {
_selectSide = value;
print(_selectSide + _textEditingController.text);
});
},
// isExpanded: true,
value: _selectSide,
elevation: 24,
//设置阴影的高度
style: new TextStyle( //设置文本框里面文字的样式
color: Color(0xff4a4a4a),
fontSize: 12,
),
// isDense: false,//减少按钮的高度。默认情况下,此按钮的高度与其菜单项的高度相同。如果isDense为true,则按钮的高度减少约一半。 这个当按钮嵌入添加的容器中时,非常有用
iconSize: 40.0,
)
),
);
}
}
List<DropdownMenuItem> fuck(){
var formList = [
{"title": '车牌号'},
{"title": '所有人'},
{"title": '号牌颜色'},
];
int i = 1;
for(var item in formList){
i++;
print(item.values);
dr.add(
new DropdownMenuItem(
child: new Text(item.values.toString()),
value: item.values.toString() ,
)
);
}
return dr;
}