Flutter — 一些基础组件的运用

1.Text

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title:'Title',
      home:Scaffold(
        body:Center(
          child:Text(
            '这是一段没有意义的文字这是一段没有意义的文字这是一段没有意义的文字',
            textAlign: TextAlign.center,
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            style:TextStyle(
              fontSize: 25,
              color:Color.fromARGB(255, 255, 125, 125),
              decoration: TextDecoration.underline,
              decorationStyle: TextDecorationStyle.solid
            )
          )
        )
      )
    );
  }
}

2.Container

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title:'Title',
      home:Scaffold(
        body:Center(
          child:Container(
            child: Text('Hello Niko',style: TextStyle(fontSize: 40)),
            alignment: Alignment.topLeft,
            width: 300,
            height:400,
//            color:Colors.lightBlue,
            padding: EdgeInsets.fromLTRB(10, 20, 0, 0),
            margin: EdgeInsets.all(20),
            decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [Colors.lightBlue,Colors.greenAccent,Colors.pink]
              ),
                border: Border.all(width: 5,color: Colors.pink)
            ),
          )
        )
        )
      );

  }
}

3.Image

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title:'Title',
      home:Scaffold(
        body:Center(
          child:Container(
            //assets memory file
            child: Image.network(
              'https://i0.hdslb.com/bfs/archive/e26a524226180c3a7af85a17020c38e9aad521f2.jpg@1100w_484h_1c_100q.jpg',
//               fit:BoxFit.contain,//按比例 图片不变形
//               fit:BoxFit.fitWidth,//横向撑满 图片不变形 纵向裁剪
//               fit:BoxFit.fitHeight,//纵向撑满 图片不变形 横向裁剪
//               fit: BoxFit.fill,//撑满 变形
//               fit: BoxFit.cover,//图片不变形 纵横撑满
                color:Colors.pink,
                colorBlendMode: BlendMode.modulate,//类似加滤镜
                repeat: ImageRepeat.repeat,//repeatX repeatY
            ),
            width: 200,
            height:200,
            color:Colors.lightBlue
        )
        )
      )
    );
  }
}

4.ListView

 纵向列表
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title:'Title',
      home:Scaffold(
        appBar: AppBar(title:Text('Hello')),
        body:ListView(
          children: <Widget>[
            new ListTile(
              leading: Icon(Icons.perm_camera_mic),
              title:Text('perm_camera_mic')
            ),
            Image.network('https://img.mukewang.com/user/57dfc46400017b4f07400740-100-100.jpg',width: 100,height:100),
            Image.network('https://img.mukewang.com/user/57dfc46400017b4f07400740-100-100.jpg',width: 100,height:100),
            Image.network('https://img.mukewang.com/user/57dfc46400017b4f07400740-100-100.jpg',width: 100,height:100),
            Image.network('https://img.mukewang.com/user/57dfc46400017b4f07400740-100-100.jpg',width: 100,height:100),
          ],
        )
      )
    );
  }
}

// 横向列表
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title:'Title',
      home:Scaffold(
        appBar: AppBar(title:Text('Hello')),
        body:Center(
          child: Container(
            height:200,
            child:ListView(
              scrollDirection: Axis.horizontal,
              children: <Widget>[
                Container(
                  width: 180,
                  color:Colors.pink
                ),
                Container(
                    width: 180,
                    color:Colors.lightBlue
                ),
                Container(
                    width: 180,
                    color:Colors.brown
                ),
                Container(
                    width: 180,
                    color:Colors.blueGrey
                ),
              ],
            )
          ),
        )
      )
    );
  }
}

// 减少嵌套的话 拆分下
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title:'Title',
      home:Scaffold(
        appBar: AppBar(title:Text('Hello')),
        body:Center(
          child: Container(
            height:200,
            child:List1()
          ),
        )
      )
    );
  }
}

class List1 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        Container(
            width: 180,
            color:Colors.pink
        ),
        Container(
            width: 180,
            color:Colors.lightBlue
        ),
        Container(
            width: 180,
            color:Colors.brown
        ),
        Container(
            width: 180,
            color:Colors.blueGrey
        ),
      ],
    );
  }

}

// 动态列表

import 'package:flutter/material.dart';

void main() => runApp(MyApp(
  List.generate(1000, (i) => "Item $i")
));

class MyApp extends StatelessWidget {

  final List items;
  MyApp(this.items);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title:'Title',
      home:Scaffold(
        appBar: AppBar(title:Text('Hello')),
        body:ListView.builder(
          itemCount: items.length,
          itemBuilder: (context,index){
            return ListTile(title: Text(items[index]));
          },
        )
      )
    );
  }
}