flutter 基础组件(一)

1.容器组件Container

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: '晴天',
      home: Scaffold(
        appBar: AppBar(title: Text('左边')),
        body: Center(
          child: Container(
            width: 200,
            height: 200,
            //设置边框圆角
            decoration: BoxDecoration(
              color: Color.fromARGB(1, 255, 255, 255),
              border: new Border.all(
                color: Colors.grey,
                width: 8.0,
              ),
              borderRadius: const BorderRadius.all(const Radius.circular(8.0)),
            ),
            child: Text(
              'xingweixin',
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 28.0),
            ),
          ),
        ),
      ),
    );
  }
}

2.图片组件Image

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: '晴天',
      home: Scaffold(
        appBar: AppBar(title: Text('左边')),
        body: Center(
          child: Image.network(
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595423624277&di=8c2211cdf9549a4e4da3ac8d15c9142c&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F21%2F20181021214329_ftnud.jpg",
            fit: BoxFit.fill,
          ),
        ),
      ),
    );
  }
}

3.文本

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: '晴天',
      home: Scaffold(
          appBar: AppBar(title: Text('左边')),
          body: Column(
            children: <Widget>[
              Text(
                '红色字体 + 黑色删除线 + 18号 + 斜体 + 粗体',
                style: TextStyle(
                    //字体颜色
                    color: const Color(0xffff0000),
                    //文本修饰器(删除线)
                    decoration: TextDecoration.lineThrough,
                    //文本修饰器(删除线)
                    decorationColor: const Color(0xff000000),
                    //字体大小
                    fontSize: 18,
                    //字体样式:是否斜体
                    fontStyle: FontStyle.italic,
                    //字体粗细
                    fontWeight: FontWeight.bold,
                    //文字间距
                    letterSpacing: 2.0),
              ),
              Text(
                '橙色 + 下划线 + 24号',
                style: TextStyle(
                  //字体颜色
                  color: const Color(0xffff9900),
                  //文本修饰器(删除线)
                  decoration: TextDecoration.underline,
                  fontSize: 24,
                ),
              ),
              Text(
                '上划线_虚线 + 23号',
                style: TextStyle(
                  //文本修饰器(删除线)
                  decoration: TextDecoration.overline,
                  decorationStyle: TextDecorationStyle.dashed,
                  fontSize: 23,
                  //字体样式
                  fontStyle: FontStyle.normal,
                ),
              ),
              Text(
                '23+斜体+加粗+间距6',
                style: TextStyle(
                  fontSize: 23,
                  fontStyle: FontStyle.italic,
                  fontWeight: FontWeight.bold,
                  letterSpacing: 6.0,
                ),
              )
            ],
          )),
    );
  }
}

图标组件Icon

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: '晴天',
      home: Scaffold(
          appBar: AppBar(title: Text('左边')),
          body: Center(
            child: Icon(
              Icons.phone,
              color: Colors.green,
              size: 40,
            ),
          )

    ),
    );
  }
}

4.按钮组件RaisedButton

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'RaisedButton',
      home: Scaffold(
          appBar: AppBar(title: Text('RaisedButton')),
          body: Center(
              child: RaisedButton(
            color: Colors.greenAccent,
            child: Text('点我呀'),
            onPressed: () {
              print("他一定很爱你");
            },
          ))),
    );
  }
}

5.列表组件ListView(纵向)

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'RaisedButton',
      home: Scaffold(
          appBar: AppBar(title: Text('RaisedButton')),
          body: ListView(
            children: <Widget>[
              ListTile(
                leading: Icon(
                  Icons.add,
                  size: 20,
                  color: Colors.deepOrange,
                ),
                title: Text('丫丫'),
              ),
              ListTile(
                leading: Icon(
                  Icons.phone,
                  size: 20,
                  color: Colors.greenAccent,
                ),
                title: Text('xingweixin'),
              ),
              ListTile(
                leading: Icon(
                  Icons.arrow_forward_ios,
                  size: 20,
                  color: Colors.greenAccent,
                ),
                title: Text('我'),
              ),
            ],
          )),
    );
  }
}

6.列表组件(纵向)

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'RaisedButton',
      home: Scaffold(
          appBar: AppBar(title: Text('RaisedButton')),
          body: Container(
            //顶部外边距
            margin: EdgeInsets.symmetric(vertical: 20),
            height: 200,
            child: ListView(
              scrollDirection: Axis.horizontal,
              children: <Widget>[
                Container(
                  width: 160,
                  color: Colors.cyan,
                ),
                Container(
                  width: 100,
                  color: Colors.lightBlue,
                ),
                Container(
                  width: 100,
                  color: Colors.yellow,
                )
              ],
            ),
          )),
    );
  }
}

7.构建长列表

import 'package:flutter/material.dart';

void main() => runApp(new MyApp(
      items: new List<String>.generate(200, (i) => "item $i"),
    ));

class MyApp extends StatelessWidget {
  //属性
  final List<String> items;
  //构造方法
  MyApp({Key key, @required this.items}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    final title = '长列表';

    // TODO: implement build
    return MaterialApp(
        title: title,
        home: Scaffold(
            appBar: AppBar(title: Text(title)),
            body: ListView.builder(
              itemCount: items.length,
              itemBuilder: (context, index) {
                return ListTile(
                  leading: Icon(Icons.add),
                  title: Text('这是爱'),
                );
              },
            )));
  }
}

8.网格组件GridView

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = '网格列表';
    // TODO: implement build
    return MaterialApp(
        title: title,
        home: Scaffold(
            appBar: AppBar(title: Text(title)),
            body: GridView.count(
              primary: false,
              padding: const EdgeInsets.all(20.0),
              crossAxisSpacing: 30.0,
              crossAxisCount: 3,
              children: <Widget>[
                const Text("1"),
                const Text("1"),
                const Text("1"),
                const Text("1"),
                const Text("1"),
                const Text("1"),
                const Text("1"),
                const Text("1"),
                const Text("1"),
              ],
            )));
  }
}