如何在布局中添加或删除组件
在Android中,您可以从父级控件调用addChild或removeChild以动态添加或删除View。 在Flutter中,因为widget是不可变的,所以没有addChild。相反,您可以传入一个函数,该函数返回一个widget给父项,并通过布尔值控制该widget的创建。
例如,当你点击一个FloatingActionButton时,如何在两个widget之间切换:
import 'package:flutter/material.dart';
void main() {
runApp(new SampleApp());
}
class SampleApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Sample App',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new SampleAppPage(),
);
}
}
class SampleAppPage extends StatefulWidget {
SampleAppPage({Key key}) : super(key: key);
@override
_SampleAppPageState createState() => new _SampleAppPageState();
}
class _SampleAppPageState extends State<SampleAppPage> {
// Default value for toggle
bool toggle = true;
void _toggle() {
setState(() {
toggle = !toggle;
});
}
_getToggleChild() {
if (toggle) {
return new Text('Toggle One');
} else {
return new MaterialButton(onPressed: () {}, child: new Text('Toggle Two'));
}
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Sample App"),
),
body: new Center(
child: _getToggleChild(),
),
floatingActionButton: new FloatingActionButton(
onPressed: _toggle,
tooltip: 'Update Text',
child: new Icon(Icons.update),
),
);
}
}
动画
在Android中,可以通过View.animate()对视图进行动画处理,那在Flutter中怎样才能对Widget进行处理
在Flutter中,可以通过动画库给widget添加动画。
在Android中,您可以通过XML创建动画或在视图上调用.animate()。在Flutter中,您可以将widget包装到Animation中。
与Android相似,在Flutter中,您有一个AnimationController和一个Interpolator, 它是Animation类的扩展,例如CurvedAnimation。您将控制器和动画传递到AnimationWidget中,并告诉控制器启动动画。
自定义控件
如何使用Canvas draw/paint
在Android中,您可以使用Canvas在屏幕上绘制自定义形状。
Flutter有两个类可以帮助您绘制画布,CustomPaint和CustomPainter,它们实现您的算法以绘制到画布。
多个Text
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), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( '444444dddfdsfsfsfsfdsfssdfsdfsfdsfdfdsf:', textAlign: TextAlign.left, maxLines: 1, ), Text( '$_counter', style: Theme.of(context).textTheme.headline4, ), Text( "gaode", style: TextStyle( fontSize: 25.0, color: Color.fromARGB(255, 22, 22, 78), decoration: TextDecoration.underline, decorationStyle: TextDecorationStyle.solid ), ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: Icon(Icons.add), ), // This trailing comma makes auto-formatting nicer for build methods. ); } }
child和children区别:
alignment:对齐的关键字
项目结构和资源
在哪里存储分辨率相关的图片文件? HDPI/XXHDPI
Flutter遵循像iOS这样简单的3种分辨率格式: 1x, 2x, and 3x.
Image:https也是可以的
可以加载网上的,本地的。网络都不需要用说明框架
本地图片一般保存在哪个目录?
- 在你的工程中创建一个
images
文件夹, 并添加lake.jpg
.
图片混合模式(colorBlendMode)和color属性配合使用,能让图片改变颜色
class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: "dsfsf", home: Scaffold( body: Center( child: Container( child: new Image.network("https://ssl-pubpic.51yund.com/1010293895.jpg",scale: 1.0) ,width: 300.0, height: 2000, alignment: Alignment.bottomRight, color: Colors.blue, ), ), ), );
容器组件:
Container:容器组件:里面如何包含多个widget??????