机遇屋-Flutter基础组件

Flutter基础组件

作者：ych

#### Text
[在线调试](https://api.flutter.dev/flutter/widgets/Text-class.html "在线调试")
```
import 'package:flutter/material.dart';
main()=>runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.amber[600],
      child: Text('Hello World',
          textDirection: TextDirection.ltr,
              ) ,
      );
  }
}
```

##### 常见错误
flutter: No Directionality widget found.
使用text组件时，没有设置文字对齐方式，导致的报错，一般情况下App的最外层都是Scaffold组件包裹，因此Text有默认的样式，如果Text组件的父组件没有Scaffold，需要设置样式。
解决：`textDirection: TextDirection.ltr`
```
import 'package:flutter/material.dart';
void main()=> runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
   // build 返回一个Widget 一个类就是widget
  Widget build(BuildContext context) {
    return Container(
      child: Text('123',textDirection: TextDirection.ltr),
    );
  }
}
```
#### Button
```
import 'package:flutter/material.dart';
_log() {
    print("点击了按钮");
  }
main()=>runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.amber[600],
      child: Directionality(
    textDirection: TextDirection.ltr,
    child: ElevatedButton(
      onPressed: _log,
      child: Text(
        "Click",
        textDirection: TextDirection.ltr,
      ),
    )),
      );
  }
}
```
优化
```
import 'package:flutter/material.dart';
_log() {
    print("点击了按钮");
  }
main()=>runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
         home: Scaffold(appBar: AppBar(title: Text("111111"),
         centerTitle: true,
         ),
         body: Container(
          height: 30,
          width: 70,
          child: ElevatedButton(
      onPressed: _log,
      child: Text(
        "Click",
        textDirection: TextDirection.ltr,
      ),
    ),
         ),
         ),
       );
  }
}
```

#### Image
##### 从asset中加载图片
在工程根目录下创建一个`images`目录，并将图片`avatar.png`拷贝到该目录。

在`pubspec.yaml`中的`flutter`部分添加如下内容：
```
  assets:
    - images/avatar.png
```
完整代码
```
import 'package:flutter/material.dart';
_log() {
    print("点击了按钮");
  }
main()=>runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
         home: Scaffold(appBar: AppBar(title: Text("111111"),
         centerTitle: true,
         ),
         body: Container(
          height: 30,
          width: 50,
          child: ElevatedButton(
      onPressed: _log,
      child: Image(
  image: AssetImage("images/avatar.png"),
  width: 100.0
)
    ),
         ),
         ),
       );
  }
}
```
Image也提供了一个快捷的构造函数`Image.asset`用于从`asset`中加载、显示图片：
```
Image.asset("images/avatar.png",
  width: 100.0,
)
```

重新加载应用

##### 从网络加载图片
```
Image(
  image: NetworkImage(
      "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),
  width: 100.0,
)
```
Image也提供了一个快捷的构造函数Image.network用于从网络加载、显示图片：
```
Image.network(
  "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
  width: 100.0,
)
```

#### FlutterLogo
```
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() {
runApp(
	MaterialApp(
	home: Scaffold(
		appBar: AppBar(
		leading: Container(
			color: Colors.white,
			padding: EdgeInsets.all(3),
			/** FlutterLogo Widget **/
			child: FlutterLogo(
			size: 10,
			), 
		), 
		title: Text('GeeksforGeeks'),
		backgroundColor: Colors.greenAccent[400],
		centerTitle: true,
		),
		body: Center(
		child: Container(
			/** FlutterLogo Widget **/
			child: FlutterLogo(
			size: 100,
			duration: Duration(seconds: 1),
			curve: Curves.easeIn,
			textColor: Colors.amber,
			style: FlutterLogoStyle.stacked,
			), 
		), 
		), 
	), 
	), 
);
}
```

#### 更多学习
[flutterchina](https://book.flutterchina.club/chapter3/buttons.html#_3-2-1-elevatedbutton "flutterchina")

评论区

先去登录

Flutter基础组件

相关推荐

评论区