import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class LayoutPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _LayoutGroupState();
}

class _LayoutGroupState extends State<LayoutPage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'layout', // 打开最近任务的时候显示的标题
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          leading: GestureDetector(
            onTap: () {
              Navigator.pop(context);
            },
            child: Container(child: Icon(Icons.arrow_back)),
          ),
          title: Text("layout学习"),
        ),
        body: Container(
          decoration: BoxDecoration(color: Colors.white),
          alignment: Alignment.center,
          child: Column(
            children: [
              Row(
                children: [
                  Container(
                      height: 30,
                      width: 120,
                      margin: EdgeInsets.all(10),
                      decoration: BoxDecoration(boxShadow: [
                        BoxShadow(
                            offset: Offset(0, 10),
                            blurRadius: 15,
                            spreadRadius: -5)
                      ]),
                      child: ElevatedButton(
                        child: Text("按钮"),
                        onPressed: () {
                          Navigator.pushNamed(context, "register");
                        },
                      )),
                  Container(
                    margin: EdgeInsets.all(10),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(50),
                        boxShadow: [
                          BoxShadow(
                              offset: Offset(0, 10),
                              blurRadius: 15,
                              spreadRadius: -5)
                        ]),
                    child: ClipOval(
                      //圆形裁剪
                      child: Container(
                        height: 120,
                        width: 120,
                        constraints:
                            BoxConstraints(maxHeight: 100, maxWidth: 100),
                        foregroundDecoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(50),
                            border: Border.all(
                                color: Colors.red,
                                width: 2,
                                style: BorderStyle.solid)),
                        child: Image.network(
                          'http://pix2.tvzhe.com/thumb/star/60/87/260x346.jpg',
                          height: 100,
                          width: 100,
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.all(10),
                    child: ClipRRect(
                      // 四个角度
                      borderRadius: BorderRadius.all(Radius.circular(20)),
                      child: Opacity(
                        opacity: 0.6, // 60%透明度
                        child: Image.network(
                          'http://pix2.tvzhe.com/thumb/star/60/87/260x346.jpg',
                          width: 100,
                          height: 100,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
              Container(
                height: 100,
                margin: EdgeInsets.all(10),
                child: PhysicalModel(
                  color: Colors.transparent,
                  borderRadius: BorderRadius.circular(6),
                  clipBehavior: Clip.antiAlias,
                  child: PageView(
                    children: [
                      _item("1", Colors.blue),
                      _item("2", Colors.red),
                      _item("3", Colors.yellow),
                    ],
                  ),
                ),
              ),
              Container(
                height: 50,
                width: 200,
                decoration: BoxDecoration(color: Colors.blue),
                child: FractionallySizedBox(
                  widthFactor: 1,
                  child: Row(
                    children: [
                      Expanded(
                        flex: 1,
                        child: Container(
                          decoration: BoxDecoration(color: Colors.grey),
                          child: Text('屏幕的二分之一'),
                        ),
                      ),
                      Expanded(
                        flex: 1,
                        child: Text('屏幕的二分之一'),
                      )
                    ],
                  ),
                ),
              ),
              FractionallySizedBox(
                widthFactor: 1,
                child: Container(
                  decoration: BoxDecoration(color: Colors.grey),
                  child: Text('屏幕的二分之一'),
                ),
              ),

              Stack(
                children: [
                  ClipOval(
                    //圆形裁剪
                    child: SizedBox(
                      width: 100,
                      height: 100,
                      child: Image.network(
                          'http://pix2.tvzhe.com/thumb/star/60/87/260x346.jpg'),
                    ),
                  ),
                  Positioned(
                    right: 0,
                    top: 0,
                    child: Icon(
                      Icons.check_circle_outline,
                      color: Colors.red,
                    ),
                  )
                ],
              ),
              Wrap(
                spacing: 8,
                runSpacing: 6,
                children: [
                  _chip("hello"),
                  _chip("中国"),
                  _chip("美国"),
                  _chip("越南"),
                  _chip("印度尼西亚"),
                  _chip("韩国"),
                  _chip("日本"),
                  _chip("英国"),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }

  _item(String title, MaterialColor color) {
    String content;
    if (title == '1') {
      content = "Earth";
    } else if (title == '2') {
      content = "China";
    } else if (title == '3') {
      content = "NetRain";
    }
    return Container(
      alignment: Alignment.center,
      decoration: BoxDecoration(color: color),
      // child: Text(title,style: TextStyle(fontSize: 22,color: Colors.white),
      child: Column(
        children: [
          Padding(
            padding: EdgeInsets.all(10),
          ),
          Text('Hello!!'),
          Padding(
            padding: EdgeInsets.all(10),
          ),
          Text(
            content,
            style: TextStyle(color: Colors.white),
          )
        ],
      ),
    );
  }

  _chip(String label) {
    return Chip(
      label: Text(label),
      avatar: CircleAvatar(
        backgroundColor: Colors.yellow.shade900,
        child: Text(
          label.substring(0, 1),
          style: TextStyle(fontSize: 15),
        ),
      ),
    );
  }
}
