标签搜索
搜索到
7
篇与
的结果
-
flutter Drawer抽屉组件 Demo感觉没什么好解释的，就是一般的简单用法，特别说一下，添加Drawer组件，Scaffold会自动给我们生成一个Drawer的按钮，如果我们在appBar中手动设置leading，确实是会更改这个按钮的图标，但是点击这个图标就不会弹出Drawer了，所以如果我们有需要自定义Drawer的图标的话，需要如下处理： leading: Builder( builder: (BuildContext context){ return IconButton( icon: Icon(Icons.wifi_tethering), onPressed: (){ Scaffold.of(context).openDrawer(); } ); } ), 手动关闭Navigator.pop(context) -
-
flutter布局容器 Row | ColumnRow | Column( mainAxisAlignment: MainAxisAlignment.center, //主轴对齐方式 crossAxisAlignment: CrossAxisAlignment.center, //交叉轴对齐方式 children: <Widget>[] //子部件 }StackStack( //使子部件重叠(必须要有父容器) alignment: Alignment(0,0), //子部件为对齐的对齐方式 children: <Widget>[] //子部件 )PositionedPositioned( top //上偏移 right //右偏移 bottom //下偏移 left //左偏移 child //子部件AspectRatioAspectRatio( //子部件纵横比 aspectRatio: 1 / 1,//宽高比 child: Container( decoration: BoxDecoration(color: Color(0xFFff0000)), ), )ConstrainedBoxConstrainedBox( //约束子部件大小 constraints: BoxConstraints( maxHeight: 200, minWidth: 10, ), child: Container( decoration: BoxDecoration(color: Color(0xFFff0000)), ), )
-
-
Flutter MaterialApp - Scaffold - DefaultTabController - AppBar class App extends StatelessWidget { @override //重写父类 Widget build(BuildContext context) { return MaterialApp( //Material风格app debugShowCheckedModeBanner: false, //关闭状态栏debug home: Home(), theme: ThemeData( //主题 primaryColor: color(0x0075b8), //主题颜色 highlightColor: color(0xffffff, a: 0.4), //高亮颜色 splashColor: color(0xffffff, a: 0.6), //水波颜色 ), ); } } class Home extends StatelessWidget { @override Widget build(BuildContext context) { return DefaultTabController( //TabBar和TabBarView的控制器，它是关联这两个组件的桥梁 length: 3, child: Scaffold( //脚手架组件 appBar: AppBar( //显示在界面顶部的一个AppBar title: Center( child: Text( "首页", style: TextStyle( fontSize: 20, fontWeight: FontWeight.w900, color: color(0xffffff), ), ), ), leading: IconButton( //标题前面显示的一个组件 icon: Icon(Icons.menu), tooltip: "Navigration", onPressed: () => debugPrint("Navigration"), ), actions: <Widget>[ //一个Widget列表一般放按钮 IconButton( icon: Icon(Icons.search), tooltip: "search", onPressed: () => debugPrint("search"), ) ], elevation: 4, //bar阴影默认4 bottom: TabBar( //ab页的选项组件，默认为水平排列。 unselectedLabelColor: color(0xffffff, a: 0.5), indicatorColor: color(0xffffff), indicatorSize: TabBarIndicatorSize.label, indicatorWeight: 2, tabs: <Widget>[ //Tab选项列表 Tab(icon: Icon(Icons.local_florist)), Tab(icon: Icon(Icons.change_history)), Tab(icon: Icon(Icons.directions_bike)), ], ), ), body: TabBarView( //ab页的内容容器，Tab页内容一般处理为随选项卡的改变而改变 children: <Widget>[ Icon(Icons.local_florist, size: 100, color: color(0x0075b8)), Icon(Icons.change_history, size: 100, color: color(0x0075b8)), Icon(Icons.directions_bike, size: 100, color: color(0x0075b8)), ], ), bottomNavigationBar: BottomBar()), ), ); } } class _BottomBar extends State<BottomBar> { int _currentIndex = 0; void _bottomTap(int index) { setState(() { _currentIndex = index; }); } @override Widget build(BuildContext context) { return BottomNavigationBar( type: BottomNavigationBarType.fixed, selectedItemColor: color(0x00000), unselectedItemColor: color(0x999999), currentIndex: _currentIndex, onTap: _bottomTap, items: [ BottomNavigationBarItem( icon: Icon(Icons.home), title: Text("home"), ), BottomNavigationBarItem( icon: Icon(Icons.domain), title: Text("domain"), ), BottomNavigationBarItem( icon: Icon(Icons.people_outline), title: Text("people_outline"), ), ], ); } } Color color(int rgb, {double a = 1}) { if (a < 0) { a = 0; } else if (a > 1) { a = 1; } return Color.fromRGBO( (rgb & 0xFF0000) >> 16, (rgb & 0x00FF00) >> 8, (rgb & 0x0000FF) >> 0, a, ); }
-
Flutter基础二State StatelessWidgetFlutter中的StatelessWidget是一个不需要状态更改的widget - 它没有要管理的内部状态。当您描述的用户界面部分不依赖于对象本身中的配置信息以及widget的BuildContext 时，无状态widget非常有用。AboutDialog, CircleAvatar和 Text 都是StatelessWidget的子类。无状态widget的build方法通常只会在以下三种情况调用:将widget插入树中时当widget的父级更改其配置时当它依赖的InheritedWidget发生变化时StatefulWidgetStatefulWidget 是可变状态的widget。 使用setState方法管理StatefulWidget的状态的改变。调用setState告诉Flutter框架，某个状态发生了变化，Flutter会重新运行build方法，以便应用程序可以应用最新状态。状态是在构建widget时可以同步读取的信息可能会在widget的生命周期中发生变化。确保在状态改变时及时通知状态 变化是widget实现者的责任。当widget可以动态更改时，需要使用StatefulWidget。 例如, 通过键入表单或移动滑块来更改widget的状态. 或者, 它可以随时间变化 - 或者数据推送更新UICheckbox, Radio, Slider, InkWell, Form, 和 TextField 都是有状态的widget，也是StatefulWidget的子类。如果用户交互或数据改变导致widget改变，那么它就是有状态的。如果一个widget是最终的或不可变的，那么它就是无状态。
-
Flutter基础一（基本结构） import 'package:flutter/material.dart';Material是一种标准的移动端和web端的视觉设计语言。 Flutter提供了一套丰富的Material widgets。main函数使用了(=>)符号, 这是Dart中单行函数或方法的简写。该应用程序继承了 StatelessWidget，这将会使应用本身也成为一个widget。 在Flutter中，大多数东西都是widget，包括对齐(alignment)、填充(padding)和布局(layout)Scaffold 是 Material library 中提供的一个widget, 它提供了默认的导航栏、标题和包含主屏幕widget树的body属性。widget树可以很复杂。widget的主要工作是提供一个build()方法来描述如何根据其他较低级别的widget来显示自己。import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Welcome to Flutter', home: new Scaffold( appBar: new AppBar( title: new Text('Welcome to Flutter'), ), body: new Center( child: new Text('Hello World'), ), ), ); } }
