显示问题: 内容超出模拟器屏幕高度出现黄色条纹
来源:6-4 StatelessWidget与基础组件【撑起Flutter的半边天】
慕无忌6890528
2022-02-23
代码执行没有问题
import 'package:flutter/material.dart';
import 'package:flutter_color_plugin/flutter_color_plugin.dart';
// StatelessWidget 无状态组件
class LessGroupLess extends StatelessWidget {
const LessGroupLess({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
// 4. 设置文字样式
TextStyle textStyle = TextStyle(fontSize: 24, color: Colors.blue);
return MaterialApp(
title: 'StatelessWidget 无状态组件',
theme: ThemeData(
primarySwatch: Colors.blue,
),
// home: const MyHomePage(title: 'StatelessWidget 无状态组件'),
home: Scaffold(
appBar: AppBar(title: Text('StatelessWidget 无状态组件1')),
body: Container(
decoration: BoxDecoration(color: Colors.white), // 1. 装饰器(设置背景颜色)
alignment: Alignment.center, // 2. 设置居中
// 3. 设置排版方式
child: Column(
children: <Widget>[
Text('StatelessWidget 使用示例', style: textStyle),
// 5. 使用 Icon 图标
Icon(Icons.android, size: 88, color: Colors.red,),
// 6. 关闭按钮
CloseButton(),
// 7. 返回按钮
BackButton(),
// 8. 材料设计
Chip(
// 设置头像
avatar: Icon(Icons.phone),
label: Text('Chip材料设计')
),
// 9. 分割线: 分割线的高度无法设置(我们可以使用 Container 自己画需要的线)
Divider(
// 分割线容器的高度
height: 30,
// 左侧间距
indent: 20,
// 设置分割线颜色
color: Colors.red,
),
// 10. 卡片: 带有圆角、阴影、边框效果的卡片(在实现 item 列表时比较常用)
Card(
color: Colors.amber, // 设置卡片颜色
elevation: 5, // 设置卡片阴影
margin: EdgeInsets.all(10),// 设置卡片 margin
child: Container(
padding: EdgeInsets.all(10),
child: Text(
'Card 卡片设置',
style: textStyle,
),
),
),
// 11. 弹框
AlertDialog(
title: Text('AlertDialog 弹框'),
content: Text('content 设置内容'),
),
],
),
),
),
);
}
}
错误图例:
写回答
1回答
-
CrazyCodeBoy
2022-02-24
超出部分会有黄色提示,可以减少widget高度或者使用可以滚动的listview来承载widget
00
相似问题