显示问题: 内容超出模拟器屏幕高度出现黄色条纹

来源: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

0
0

Flutter从入门到进阶 实战携程网App 一网打尽核心技术

解锁Flutter开发新姿势,,系统掌握Flutter开发核心技术。

4788 学习 · 3270 问题

查看课程