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 今天的天氣不錯，我要出去玩呀呀峰尝。但是我要學(xué)習(xí)，我愛學(xué)習(xí)。學(xué)習(xí)使我快樂均驶，今天開始學(xué)習(xí)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),//內(nèi)編劇
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: <Widget>[
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),
),
],
)),
),
);
}
}
官網(wǎng)例子
包含橫向排列縱向排列郑口，圖片
import 'package:flutter/material.dart';
//官方布局練習(xí)
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '官網(wǎng)的布局',
home: MyHomeScreen(),
);
}
}
//第二列的布局
class SecondLine extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.yellow,
padding: const EdgeInsets.all(15),
child: Row(//橫向排列
children: <Widget>[
Expanded(
child: Column(//豎排列
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
padding: const EdgeInsets.only(bottom: 8),
child: Text('我是個安靜的標(biāo)題',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: <Widget>[
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: <Widget>[
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(
'這就完成簡單的靜態(tài)頁面這就完成簡單的靜態(tài)頁面吧這就完成簡單的靜態(tài)頁面吧這就完成簡單的靜態(tài)頁面吧這就完成簡單的靜態(tài)頁面吧'
'這就完成簡單的靜態(tài)頁面吧這就完成簡單的靜態(tài)頁面吧這就完成簡單的靜態(tài)頁面吧這就完成簡單的靜態(tài)頁面吧這就完成簡單的靜態(tài)頁面吧'
'這就完成簡單的靜態(tài)頁面吧這就完成簡單的靜態(tài)頁面吧這就完成簡單的靜態(tài)頁面吧這就完成簡單的靜態(tài)頁面吧'
'這就完成簡單的靜態(tài)頁面吧這就完成簡單的靜態(tài)頁面吧這就完成簡單的靜態(tài)頁面吧這就完成簡單的靜態(tài)頁面吧吧',
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: <Widget>[
Image.asset('images/lake.jpg'),
SecondLine(),
ThirdLine(),
FourLine(),
],
),
);
}
}
