flutter支持PHP写的API,flutter常见组件API(第一期)

内容如果对你有帮助,帮忙点下赞,你的点赞是我更新最大的动力,谢谢啦!如果在开发的过程遇到问题可以一起讨论,可以加我的QQ群!167646174!也可以加我微信,在群里!

具体代码见github ,欢迎各位Star,以及提issues!

1.ListTile

效果如上:

new ListTile(

// 前缀

leading:Icon(Icons.navigation),

// 标题

title: Text("导航栏组件",style:TextStyle(fontWeight:FontWeight.w500)),

// 副标题

subtitle: Text("常见的底部导航栏组件"),

// 后缀

trailing: Icon(Icons.chevron_right),

// 点击事件

onTap: (){

Navigator.push(

context,

MaterialPageRoute(

builder:(context)=>new BottomNavigation()

)

);

},

// 长按事件

onLongPress: (){

print("object");

}

)

API

作用

leading

前缀

title

标题

subtitle

副标题

trailing

后缀

onTap

点击事件

onLongPress

长按事件

2.规则的灵活导航栏

效果如上

class _BottomNavigationWidgetState extends State {

int _currentIndex=0;

var appBarTitle=["组件","关于"];

var appBarIcon=[Icons.all_inclusive,Icons.blur_on];

List list=List();

// 导航栏文字选中颜色

Text getTabTitle(int curIndex){

if(curIndex==_currentIndex){

return new Text(appBarTitle[curIndex],

style: new TextStyle(fontSize: 14.0,color:const Color(0xff845F3F)));

}else{

return new Text(appBarTitle[curIndex],

style: new TextStyle(fontSize: 14.0, color: const Color(0xff696969)));

}

}

// 小图标改变选中颜色

Icon getIcon(int curIndex){

if(curIndex==_currentIndex){

return Icon(appBarIcon[curIndex],color:const Color(0xff845F3F));

}else{

return Icon(appBarIcon[curIndex],color:const Color(0xff696969));

}

}

// 初始化方法

@override

void initState() {

list

..add(ComponentPage())

..add(AboutPage());

super.initState();

}

@override

Widget build(BuildContext context) {

return Scaffold(

body: list[_currentIndex],

bottomNavigationBar: BottomNavigationBar(

items: [

new BottomNavigationBarItem(icon: getIcon(0),title: getTabTitle(0)),

new BottomNavigationBarItem(icon: getIcon(1),title: getTabTitle(1)),

],

fixedColor: Colors.orange,

// 高亮选项

currentIndex: _currentIndex,

onTap: (int index){

setState(() {

_currentIndex=index;

});

},

),

);

}

}

3.floatingActionButton(不规则底部导航栏)

效果如上

return Scaffold(

// 首选项

body: _eachView[_index],

// 浮动按钮

floatingActionButton: FloatingActionButton(

// 长按复选按钮显示的文字

tooltip: "长按悬浮按钮显示",

// 按钮里面内容

child: Icon(

Icons.ac_unit,

color:Colors.white

),

// 点击事件

onPressed: (){

Navigator.of(context).push(MaterialPageRoute(builder:(BuildContext context){

return EachView('悬浮按钮新页面');

}));

},

),

// 悬浮按钮浮动的位置

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

bottomNavigationBar: BottomAppBar(

color: Colors.blue,

shape: CircularNotchedRectangle(),

child: Row(

mainAxisAlignment: MainAxisAlignment.spaceAround,

mainAxisSize: MainAxisSize.max,

children: [

IconButton(

icon: Icon(Icons.access_time),

color: Colors.white,

onPressed: (){

setState(() {

_index=0;

});

},

),

IconButton(

icon: Icon(Icons.accessibility),

color: Colors.white,

onPressed: (){

setState(() {

_index=1;

});

},

)

],

),

),

);

floatingActionButton API

API

作用

child

子视图

tooltip

长按文字提示

foregroundColor

前景色

backgroundColor

背景色

heroTag

hero效果使用的tag,系统默认会给所有FAB使用同一个tag,方便做动画效果

hignlightElevation

点击时阴影值，默认12.0

onPressed

点击回调事件

mini

是否为mini,默认flase

shape

定义形状，设置shape时，默认的elevation将会失效,默认为CircleBorder

isExtended

是否为extended

4.AppBar

API

作用

leading

前缀,一般是一个icon

title

标题

actions

一系列最右边组件

flexibleSpace

bottom和appBar Title之间

bottom

如图

elevation

Appbar和Body整体之间那个横线阴影,默认为4,分隔开AppBar和整体内容

backgroundColor

背景色

brightness

亮度

iconTheme

Icon样式

textTheme

字体样式

centerTitle

标题位置,IOS默认显示居中,Android靠左,设置会显示统一

5.AppBar Tabs

效果如上:

return MaterialApp(

home: new DefaultTabController(

length:choices.length,

child: new Scaffold(

appBar: new AppBar(

title: Text("AppBar Tabs"),

bottom: new TabBar(

// tabs颜色选中颜色

labelColor:Colors.orange,

// tabs选中样式

labelStyle: TextStyle(fontSize: 18),

// tabs未选中的颜色

unselectedLabelColor: Colors.white,

// tabs未选中的样式

unselectedLabelStyle: TextStyle(fontSize: 10),

// 底部指示器的padding

indicatorPadding: const EdgeInsets.all(0),

// 底部指示器高度

indicatorWeight: 2,

//底部指示器颜色

indicatorColor: Colors.red,

// 指示器大小计算方式

// indicatorSize: ,

// 是否可滚动

// isScrollable: true,

tabs: [

Tab(text: "推荐",icon:Icon(Icons.ac_unit)),

Tab(text: "关注",icon:Icon(Icons.access_alarm)),

Tab(text: "热榜",icon:Icon(Icons.access_time)),

],

),

),

// tabs主体内容

body: new TabBarView(

children: [

new TestPage(),

new TestPage(),

new TestPage(),

],

),

),

),

);

API

作用

labelColor

tabs颜色选中颜色

labelStyle

tabs选中样式

unselectedLabelColor

tabs未选中的颜色

unselectedLabelStyle

tabs未选中的样式

indicatorPadding

底部指示器padding

indicatorWeight

底部指示器高度

indicatorColor

底部指示器颜色

indicatorSize

底部指示器大小计算方式

isScrollable

是否可以滚动

6.Row/Column 水平/垂直布局

Container(

height: 300,

color: Colors.yellow,

child: Row(

// 主轴(x)对齐方式

mainAxisAlignment: MainAxisAlignment.center,

// 副轴对齐方式

crossAxisAlignment: CrossAxisAlignment.baseline,

textBaseline: TextBaseline.alphabetic,

children: [

Container(

color: Colors.purple,

child: FlutterLogo(

size: 60.0,

),

),

Container(

color: Colors.purple,

child: FlutterLogo(

size: 60.0,

),

),

Container(

color: Colors.purple,

child: FlutterLogo(

size: 60.0,

),

),

],

),

),

Container(

width: 800,

height: 300,

color: Colors.red,

child: Column(

// 主轴(x)对齐方式

mainAxisAlignment: MainAxisAlignment.center,

// 副轴对齐方式

crossAxisAlignment: CrossAxisAlignment.center,

textBaseline: TextBaseline.alphabetic,

children: [

Container(

color: Colors.purple,

child: FlutterLogo(

size: 60.0,

),

),

Container(

color: Colors.purple,

child: FlutterLogo(

size: 60.0,

),

),

Container(

color: Colors.purple,

child: FlutterLogo(

size: 60.0,

),

),

],

),

),

API

作用

可选参数

mainAxisAlignment

主轴(x)对齐方式

MainAxisAlignment.start(默认值),center,end,spaceAround,spaceBetween,spaceEvenly

crossAxisAlignment

副轴对齐方式

CrossAxisAlignment.center (默认值),start,end,stretch,baseline

textDirection

文字对齐方式

TextDirection.ltr(默认),rtl

verticalDirection

和textDirection类似

VerticalDirection.down(默认),up

mainAxisSize

子组件占主轴空间大小

MainAxisSize.max(默认),min

一点特殊说明:

CrossAxisAlignment.baseline:子部件基线对齐

值为 CrossAxisAlignment.baseline时 必须同时使用 textBaseline， 否则会报错

没有用 baseline

Row(

crossAxisAlignment: CrossAxisAlignment.start,

children: [

Text(

'Flutter',

style: TextStyle(

color: Colors.red,

fontSize: 30.0

),

),

Text(

'Flutter',

style: TextStyle(

color: Colors.blue,

fontSize: 20.0

),

),

],

)

用 baseline

textBaseline: TextBaseline.alphabetic(中轴对齐)

textBaseline: TextBaseline.ideographic(底部对齐)

Row(

crossAxisAlignment: CrossAxisAlignment.baseline,

textBaseline: TextBaseline.alphabetic,

children: [

Text(

'Flutter',

style: TextStyle(

color: Colors.red,

fontSize: 30.0

),

),

Text(

'Flutter',

style: TextStyle(

color: Colors.blue,

fontSize: 20.0

),

),

],

)

textDirection

Row 部件的 textDirection

TextDirection.rtl

文字从右到左排列，主轴(水平)方向 start->end 是 从右到左

TextDirection.ltr (默认)

从左往右排列，主轴(水平)方向 start->end 是 从左到右

verticalDirection

和 textDirection 类似

确定 Column 部件的垂直摆放方向

解释垂直方向的 start 和 end 方向

mainAxisSize

所有子部件占据主轴的空间大小

7.TextField

输入框

TextField(

enableInteractiveSelection: false,

// 禁止输入

enabled: true,

// 聚焦点颜色

cursorColor: Colors.red,

//聚焦点圆边角

cursorRadius: Radius.circular(10),

// 聚焦点宽度

cursorWidth: 1,

// 自动获取焦点

autofocus: false,

// 长度限制

// maxLength: 5,

// 是否为密码

obscureText: false,

// 输入框类型

keyboardType:TextInputType.number,

// 文本对齐方式

textAlign: TextAlign.center,

// 最大行数

maxLines: 1,

// 是否自动更正

autocorrect:true,

// 值改变事件

onChanged:_textFieldChanged,

//用户完成内容

onSubmitted:(text){},

// 内容提交(按回车键)

onEditingComplete:(){},

decoration: InputDecoration(

// 初始化的输入框比较高,这个解决高度

contentPadding: EdgeInsets.all(10.0),

//默认提示

hintText:"呵呵呵提示",

labelText: "输入",

helperText: "请输入你的输入",

border: OutlineInputBorder(

// 圆边角

borderRadius: BorderRadius.circular(15.0)

)

),

),

API

作用

可选参数

enableInteractiveSelection

为true的时候长按会显示系统粘贴板的内容

Boolean

enabled

禁止输入

Boolean

cursorColor

聚焦点的颜色

-

cursorRadius

聚焦点的园边角

-

cursorWidth

聚焦点宽度

-

autofocus

自动获取焦点

-

maxLength

长度限制

Number

obscureText

类型是否为密码

Boolean

keyboardType

输入框类型

-

textAlign

文本对齐方式

-

maxLines

最大行数

Number

autocorrect

是否自动更正

Boolean

onChanged

值改变事件

Func

onSubmitted

用户完内容事件

Func

onEditingComplete

内容提交Enter

Func

decoration

样式装饰器

-

具体代码见github ,欢迎各位Star,以及提issues

不定期更新,根据工作繁忙程度决定.

以下是相关文章flutter常见组件之Button(第二期)