Flutter基础总结（2）列表和基本布局的搭建

一件事，想通了是天堂，想不通就是地狱。既然活着，就要活好。有些时候我们由于太小心眼，太在意身边的琐事而因小失大，得不偿失。有些事是否能引来麻烦和烦恼，完全取决于我们如何看待和处理它。别去钻牛角尖，别太要面子，别小心眼。不在意，就是一种豁达、一种洒脱。

1：效果图

image.png image.png

2：代码如下

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

  void main() {
  runApp(MyApp());
  }

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
  title: "FlutterDemo2",
  theme: ThemeData(primarySwatch: Colors.red),
  home: MyHomePage(
    title: "Flutter Demo Home Page",
  ),
  );
  }
}

class MyHomePage extends StatefulWidget {
final String title;

MyHomePage({Key key, this.title}) : super(key: key);

@override
State<StatefulWidget> createState() {
// TODO: implement createState
return MyHomePageState();
}
}

class MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
// TODO: implement build
var stack = new Stack(
  children: <Widget>[
    CircleAvatar(
      backgroundImage: new NetworkImage(
          "https://upload.jianshu.io/users/upload_avatars/13517457/c3fdec57-8982-4b4e-8ffd-3b6dafab4a10.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240"),
      radius: 150.0,
    ),
    Positioned(
      left: 120,
      top: 110,
      child: Container(
        decoration: new BoxDecoration(
          color: Colors.red,
          borderRadius: BorderRadius.circular(10.0),
        ),
        padding: EdgeInsets.all(10.0),
        child: Text("第一个盒子"),
      ),
    ),
    Positioned(
      child: Container(
        decoration: new BoxDecoration(
          color: Colors.green,
          borderRadius: BorderRadius.circular(8.0),
        ),
        padding: EdgeInsets.all(10.0),
        child: Text(
          "这是第二个盒子"
        ),
      ),
    )
  ],
);

/**
 * 卡片布局
 */
var card = new Card(
  child: new Column(
    children: <Widget>[
      ListTile(
        title: Text("薛志辉", style: TextStyle(fontWeight: FontWeight.w500)),
        subtitle: Text("dgut2019"),
        leading: Icon(Icons.account_balance,
            color: Theme.of(context).primaryColor),
        onTap: () {},
      ),
      Divider(),
      ListTile(
        title: Text("星期二", style: TextStyle(fontWeight: FontWeight.w100)),
        subtitle: Text("dgut2018"),
        leading:
            Icon(Icons.access_time, color: Theme.of(context).accentColor),
        onTap: () {},
      ),
      ListTile(
        title: Text(
          "星期四",
          style: TextStyle(fontWeight: FontWeight.w800),
        ),
        subtitle: Text("dgut2019"),
        leading: Icon(
          Icons.accessibility,
          color: Theme.of(context).toggleableActiveColor,
        ),
        onTap: () {},
      )
    ],
  ),
);
return Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),
  body: Center(
    child: card,
  ),
);
}
}

githup地址： https://github.com/xuezhihuixzh/Flutter_demo.git