Flutter学习（三）

Row水平布局

void main() => runApp(MaterialApp(
      title: "包装控件",
      home: LayoutDemo(),
    ));

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Widget packedRow = Row(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Icon(Icons.star, color: Colors.green[500]),
        Icon(Icons.star, color: Colors.green[500]),
        Icon(Icons.star, color: Colors.green[500]),
        Icon(Icons.star, color: Colors.black),
        Icon(Icons.star, color: Colors.black),
      ],
    );
    return Scaffold(
      appBar: AppBar(
        title: Text("Row"),
      ),
      body: packedRow,
    );
  }
}

运行效果：

void main() => runApp(MaterialApp(
      title: "包装控件",
      home: LayoutDemo(),
    ));

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
       appBar: AppBar(
         title: Text("水平布局"),
       ),
      body: Row(
        children: <Widget>[
         const FlutterLogo(),
          const Text("您的预约订单已提交，如需修改或取消，请至我的-我的订单中操作"),
          Icon(Icons.sentiment_very_satisfied)
        ],
      ),
    );
  }
}

出现警告：

expanded：

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("水平布局"),
      ),
      body: Row(
        children: <Widget>[
          const FlutterLogo(),
          Expanded(child: Text("您的预约订单已提交，如需修改或取消，请至我的-我的订单中操作")),
          Icon(Icons.sentiment_very_satisfied)
        ],
      ),
    );
  }
}

自动换行效果：

column垂直布局

void main() => runApp(MaterialApp(
      title: "包装控件",
      home: LayoutDemo(),
    ));

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("垂直布局"),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text('We move under cover and we move as one'),
          Text('Through the night, we have one shot to live another day'),
          Text('We cannot let a stray gunshot give us away'),
          Text('We will fight up close, seize the moment and stay in it'),
          Text('It’s either that or meet the business end of a bayonet'),
          Text('The code word is ‘Rochambeau,’ dig me?'),
          Text('Rochambeau!', style: DefaultTextStyle.of(context).style.apply(fontSizeFactor: 2.0)),
        ],
      ),
    );
  }
}

运行效果：

• 主轴mainAxisSize,次轴crossAxisAlignment，水平布局主轴为X轴，次轴为Y轴，垂直布局主轴为Y轴，次轴为X轴

Stack布局

• 按顺序，前面的在底部后面的在上部
• alignment: const FractionalOffset(0.5, 0.9),参数为X轴，Y轴偏移比例

void main() => runApp(MaterialApp(
      title: "Stack层叠布局示例",
      home: MyApp(),
    ));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var stack = new Stack(
      alignment: const FractionalOffset(0.5, 0.9),
      children: <Widget>[
        new CircleAvatar(
          backgroundImage: new AssetImage("images/14.jpg"),
          radius: 100,
        ),
        new Container(
          decoration: new BoxDecoration(color: Colors.black38),
          child: new Text(
            "hello,Trump",
            style: new TextStyle(
                fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white),
          ),
        )
      ],
    );

    return Scaffold(
        appBar: AppBar(
          title: Text("Stack层叠布局示例"),
        ),
        body: new Center(
          child: stack
        ));
  }
}

运行效果：

层叠定位布局
绝对定位，偏移制定像素值

void main() => runApp(MaterialApp(
      title: "层叠定位布局示例",
      home: MyApp(),
    ));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("层叠定位布局示例"),
        ),
        body: new Stack(
          children: <Widget>[
            new Image.network(
                "https://pics2.baidu.com/feed/a8ec8a13632762d0312450694888b5fe503dc6bc.png?token=9864e38c2ceab51b62727dc9d77e264a&s=7C96749E84E876AC7836DD6003002039"),
            new Positioned(
              left: 100,
                top: 200,
                child: new Text(
              "Hello,Trump",
              style: new TextStyle(
                  fontSize: 20, fontFamily: "Serif", color: Colors.black),
            ))
          ],
        ));
  }
}

运行效果：

card布局

void main() => runApp(MaterialApp(
      title: "Card布局示例",
      home: MyApp(),
    ));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var card = new SizedBox(
      height: 250,
      child: new Card(
        child: new Column(
          children: <Widget>[
            new ListTile(
              title: new Text("北京市海淀区高梁桥斜街39号",style: new TextStyle(fontWeight: FontWeight.w300),),
              subtitle: new Text("交大知行大厦"),
              leading: new Icon(Icons.directions_car,color:Colors.lightBlue,),
            ),
            new Divider(),
            new ListTile(
              title: new Text("北京市海淀区高梁桥斜街39号",style: new TextStyle(fontWeight: FontWeight.w300),),
              subtitle: new Text("交大知行大厦"),
              leading: new Icon(Icons.directions_car,color:Colors.lightBlue,),
            ),
          ],
        ),
      ),
    );

    return Scaffold(
        appBar: AppBar(
          title: Text("Card布局示例"),
        ),
        body: new Center(
          child: card
        ));
  }
}

运行效果：
滑动布局

void main() => runApp(MaterialApp(
      title: "滑动布局示例",
      home: MyApp(),
    ));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("滑动布局示例"),
        ),
        body: new ListView(
          children: <Widget>[
            new Center(
              child: new Text(
                "九寨沟",
                style: new TextStyle(fontSize: 30),
              ),
            ),
            new Center(
              child: new Text(
                "五花海自然风景区",
                style: new TextStyle(fontSize: 16),
              ),
            ),
            new Center(
              child: new Text(
                '''
              九寨沟五花海 [1]  海拔2472米，水深5米，面积9万平方米，被誉为“九寨沟一绝”和“九寨精华”，在珍珠滩瀑布之上，熊猫湖的下部于日则沟孔雀河上游的尽头。五花海四周的山坡，入秋后便笼罩在一片绚丽的秋色中，色彩丰富，姿态万千。由于海底的钙华沉积和各种色泽艳丽的藻类，以及沉水植物的分布差异，使一湖之中形成了许多斑斓的色块，宝蓝、翠绿、橙黄、浅红，似无数块宝石镶嵌成的巨形佩饰，珠光宝气，雍容华贵。金秋时节，湖畔五彩缤纷的彩林倒映在湖面，与湖底的色彩混合成了一个异彩纷呈的彩色世界。其色彩十分丰富，甚至超出了画家的想象力。黄昏时分，火红的晚霞映入水中，湖水似金星飞溅，彩波粼粼，绮丽无比。从老虎嘴俯瞰它的全貌，俨然是一只羽毛丰满的开屏孔雀。长海流入五花海的水在经过石灰岩岩脉时，使水中带入了大量的石灰钙华物质。这些含有钙华物质的白色砂粒有很强的过滤作用，又像是热带珊瑚海中的沙子一样堆积着，连这里的藻类也因为受到了钙华物质的影响而变成白色。阳光一照，海子更为迷离恍惚，绚丽多姿，一片光怪陆离，使人进入了童话境地
              五花海是九寨沟诸景点中最精彩一个。四周的山坡，入秋后便笼罩在一片绚丽的秋色中，色彩丰富，姿态万千，独霸九寨。五花海的彩叶大半集中在出水口附近的湖畔，一株株彩叶交织成锦，如火焰流金。含碳酸钙质的池水，与含不同叶绿素的水生群落，在阳光作用下，幻化出缤纷色彩，一团团、一块块，有湛蓝、有墨绿、有翠黄。岸上林丛，赤橙黄绿倒映池中，一片色彩斑斓，与水下沉木、植物相互点染，其美尤妙，故得名五花海。九寨人说：五花海是神池，它的水洒向哪儿，哪儿就花繁林茂，美丽富饶。
　　          五花海的底部景观妙不可言，湖水一边是翠绿色的，一边是湖绿色的，湖底的枯树由于钙化，变成一丛丛灿烂的珊瑚，在阳光的照射下，五光十色，非常迷人。
              九寨沟五花海 [1]  海拔2472米，水深5米，面积9万平方米，被誉为“九寨沟一绝”和“九寨精华”，在珍珠滩瀑布之上，熊猫湖的下部于日则沟孔雀河上游的尽头。五花海四周的山坡，入秋后便笼罩在一片绚丽的秋色中，色彩丰富，姿态万千。由于海底的钙华沉积和各种色泽艳丽的藻类，以及沉水植物的分布差异，使一湖之中形成了许多斑斓的色块，宝蓝、翠绿、橙黄、浅红，似无数块宝石镶嵌成的巨形佩饰，珠光宝气，雍容华贵。金秋时节，湖畔五彩缤纷的彩林倒映在湖面，与湖底的色彩混合成了一个异彩纷呈的彩色世界。其色彩十分丰富，甚至超出了画家的想象力。黄昏时分，火红的晚霞映入水中，湖水似金星飞溅，彩波粼粼，绮丽无比。从老虎嘴俯瞰它的全貌，俨然是一只羽毛丰满的开屏孔雀。长海流入五花海的水在经过石灰岩岩脉时，使水中带入了大量的石灰钙华物质。这些含有钙华物质的白色砂粒有很强的过滤作用，又像是热带珊瑚海中的沙子一样堆积着，连这里的藻类也因为受到了钙华物质的影响而变成白色。阳光一照，海子更为迷离恍惚，绚丽多姿，一片光怪陆离，使人进入了童话境地
              五花海是九寨沟诸景点中最精彩一个。四周的山坡，入秋后便笼罩在一片绚丽的秋色中，色彩丰富，姿态万千，独霸九寨。五花海的彩叶大半集中在出水口附近的湖畔，一株株彩叶交织成锦，如火焰流金。含碳酸钙质的池水，与含不同叶绿素的水生群落，在阳光作用下，幻化出缤纷色彩，一团团、一块块，有湛蓝、有墨绿、有翠黄。岸上林丛，赤橙黄绿倒映池中，一片色彩斑斓，与水下沉木、植物相互点染，其美尤妙，故得名五花海。九寨人说：五花海是神池，它的水洒向哪儿，哪儿就花繁林茂，美丽富饶。
　　          五花海的底部景观妙不可言，湖水一边是翠绿色的，一边是湖绿色的，湖底的枯树由于钙化，变成一丛丛灿烂的珊瑚，在阳光的照射下，五光十色，非常迷人。
               ''',
                style: new TextStyle(fontSize: 14),
              ),
            ),
          ],
        ));
  }
}

运行效果：

appBar

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      title: "包装控件",
      home: DidiSample(),
    ));

class DidiSample extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _DidiSampleState();
}

class _DidiSampleState extends State<DidiSample> {
  Choice _selectedChoice = choices[0];

  void _select(Choice choice) {
   setState(() {
     _selectedChoice = choice;
   });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: const Text("appbar"),
        actions: <Widget>[
          IconButton(
              icon: Icon(choices[0].icon),
              onPressed: () {
                _select(choices[0]);
              }),
          IconButton(
              icon: Icon(choices[1].icon),
              onPressed: () {
                _select(choices[1]);
              }),
          PopupMenuButton<Choice>(
              onSelected: _select,
              itemBuilder: (BuildContext context) {
                return choices
                    .skip(2)
                    .map<PopupMenuItem<Choice>>((Choice choice) {
                  return PopupMenuItem(
                      value: choice, child: Text(choice.title));
                }).toList();
              }),
        ],
      ),
      body: Padding(
          padding: const EdgeInsets.all(16),
          child: ChoiceDidi(choice: _selectedChoice)),
    )
    );
  }
}

class ChoiceDidi extends StatelessWidget {
  final Choice choice;

  const ChoiceDidi({Key key, this.choice}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final TextStyle textStyle = Theme.of(context).textTheme.display1;
    return Card(
        color: Colors.white,
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Icon(
                choice.icon,
                size: 128,
                color: textStyle.color,
              ),
              Text(
                choice.title,
                style: textStyle,
              )
            ],
          ),
        ));
  }
}

class Choice {
  final String title;
  final IconData icon;

  const Choice({this.title, this.icon});
}

const List<Choice> choices = <Choice>[
  Choice(title: '自驾', icon: Icons.directions_car),
  Choice(title: '自行车', icon: Icons.directions_bike),
  Choice(title: '乘船', icon: Icons.directions_boat),
  Choice(title: '公交车', icon: Icons.directions_bus),
  Choice(title: '火车', icon: Icons.directions_transit),
  Choice(title: '步行', icon: Icons.directions_walk),
];

运行效果：

void main() => runApp(MaterialApp(
      title: "包装控件",
      home: _DidiSampleState(),
    ));

class _DidiSampleState extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: DefaultTabController(
            length: choices.length,
            child: Scaffold(
              appBar: AppBar(
                title: const Text('滴滴出行'),
                bottom: TabBar(
                    tabs: choices.map((Choice choice) {
                  return Tab(
                    text: choice.title,
                    icon: Icon(choice.icon),
                  );
                }).toList()),
              ),
              body: TabBarView(
                  children: choices.map((Choice choice) {
                return Padding(
                  padding: const EdgeInsets.all(16),
                  child: ChoiceDidi(
                    choice: choice,
                  ),
                );
              }).toList()),
            )
        )
    );
  }
}

class ChoiceDidi extends StatelessWidget {
  final Choice choice;

  const ChoiceDidi({Key key, this.choice}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final TextStyle textStyle = Theme.of(context).textTheme.display1;
    return Card(
        color: Colors.white,
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Icon(
                choice.icon,
                size: 128,
                color: textStyle.color,
              ),
              Text(
                choice.title,
                style: textStyle,
              )
            ],
          ),
        ));
  }
}

class Choice {
  final String title;
  final IconData icon;

  const Choice({this.title, this.icon});
}

const List<Choice> choices = <Choice>[
  Choice(title: '自驾', icon: Icons.directions_car),
  Choice(title: '自行车', icon: Icons.directions_bike),
  Choice(title: '乘船', icon: Icons.directions_boat),
  Choice(title: '公交车', icon: Icons.directions_bus),
  Choice(title: '火车', icon: Icons.directions_transit),
  Choice(title: '步行', icon: Icons.directions_walk),
];

运行效果：