3.Flutter布局UI 基本组件：文字和图片 自定义控件

如何在布局中添加或删除组件

在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？？？？？？