Text基本用法和外边框
import 'package:flutter/material.dart';
//基本组件的使用 1.Text 2.Container
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Text widget",
home: Scaffold(
body: Center(
child: Container(
child: Text(
"hello lyj 今天的天气不错，我要出去玩呀呀。但是我要学习，我爱学习。学习使我快乐，今天开始学习flutters",
textAlign: TextAlign.center,
// maxLines: 1,
// overflow: TextOverflow.ellipsis,
style:TextStyle(
color: Color.fromRGBO(28, 29, 120, 1),
fontSize: 14,
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.solid//实线
) ,
),
alignment: Alignment.center,
width: 500,
height: 100,
// color: Colors.red,
// padding: const EdgeInsets.all(10.0),
padding: const EdgeInsets.fromLTRB(10, 5, 5, 10),//内编剧
margin: const EdgeInsets.all(10.0),//外边距
decoration: BoxDecoration(
gradient: const LinearGradient(
colors: [Colors.lightBlue,Colors.greenAccent,Colors.purple]
),
border: Border.all(color: Colors.red,width: 2),
borderRadius: BorderRadius.circular(50)
),
)
),
),
);
}
}
图片的用法
import 'package:flutter/material.dart';
//3.iamge
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Text widget",
home: Scaffold(
body: Center(
child: ListView(
children: [
Container(
child: Image.network(
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555747523962&di=a1c0b1b4f8561a79e5dcb4a7409b022c&imgtype=0&src=http%3A%2F%2Fp0.ssl.qhimg.com%2Ft01c3f5bf72e7d1ac67.png",
scale: 1.0,
fit: BoxFit.contain,
color: Colors.greenAccent,
colorBlendMode: BlendMode.darken,
repeat: ImageRepeat.repeatY,
),
// alignment: Alignment.center,
width: 500,
height: 400,
color: Colors.red,
// padding: const EdgeInsets.all(10.0),
),
Container(
child: Image.asset(
'images/Apr-27-2019 16-03-03.gif',
scale: 1.0,
),
// padding: const EdgeInsets.all(10.0),
),
],
)),
),
);
}
}
官网例子
包含横向排列纵向排列，图片
import 'package:flutter/material.dart';
//官方布局练习
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '官网的布局',
home: MyHomeScreen(),
);
}
}
//第二列的布局
class SecondLine extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.yellow,
padding: const EdgeInsets.all(15),
child: Row(//横向排列
children: [
Expanded(
child: Column(//竖排列
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: const EdgeInsets.only(bottom: 8),
child: Text('我是个安静的标题',style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18,color: Colors.black),),
),
Text('我是详情噗啦啦啦,娃哈哈',style: TextStyle(fontWeight: FontWeight.bold,color: Colors.grey[500]),),
],
),
),
Icon(Icons.star,color: Colors.red[500],),
Container(child: Text('100'),padding: const EdgeInsets.only(left: 10),),
],
),
);
}
}
class ThirdLine extends StatelessWidget{
@override
Widget build(BuildContext context) {
//
MaterialButton buildButtonColumn1(IconData icon, String label){
Color color = Theme.of(context).primaryColor;
return MaterialButton(
color: Colors.red,
onPressed: () => {print('$label被点击')},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(icon,color:color),
Container(
margin: const EdgeInsets.only(top:8),
child: new Text(label,
style: TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w400,
color: color,
)),
),
],
),
);
}
return Container(
padding: const EdgeInsets.fromLTRB(40, 10, 40, 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: Container(
child: buildButtonColumn1(Icons.call, 'Call'),
),
),
Expanded(
child: Container(
// color: Colors.yellow,
child: buildButtonColumn1(Icons.near_me, 'ROUTE'),
),
),
Expanded(
child: Container(
// color: Colors.pink,
child: buildButtonColumn1(Icons.share, 'SHARE'),
),
)
],
),
);
}
}
class FourLine extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(32),
child: Text(
'这就完成简单的静态页面这就完成简单的静态页面吧这就完成简单的静态页面吧这就完成简单的静态页面吧这就完成简单的静态页面吧'
'这就完成简单的静态页面吧这就完成简单的静态页面吧这就完成简单的静态页面吧这就完成简单的静态页面吧这就完成简单的静态页面吧'
'这就完成简单的静态页面吧这就完成简单的静态页面吧这就完成简单的静态页面吧这就完成简单的静态页面吧'
'这就完成简单的静态页面吧这就完成简单的静态页面吧这就完成简单的静态页面吧这就完成简单的静态页面吧吧',
style:TextStyle(fontSize: 12.0, fontWeight: FontWeight.normal, color: Colors.grey)
),
);
}
}
class MyHomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context){
return Scaffold(//基本页面组件
appBar: AppBar(
title: Text('首页'),
),
body: ListView(
children: [
Image.asset('images/lake.jpg'),
SecondLine(),
ThirdLine(),
FourLine(),
],
),
);
}
}
参考链接
Flutter常用组件学习以及官方Demo
Flutter开发之基础组件