Scaffold widgets require a MediaQuery widget ancestor

最新推荐文章于 2024-08-22 08:58:35 发布

原创最新推荐文章于 2024-08-22 08:58:35 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

flutter 专栏收录该内容

220 篇文章

订阅专栏

本文介绍了一个简单的Flutter应用实例，展示了如何使用Scaffold组件构建基本页面布局，并通过MaterialApp组件作为根节点来正确组织Scaffold。文章还解释了Scaffold不能直接作为根视图的原因，并提供了完整的代码示例。

1、Scaffold widgets require a MediaQuery widget ancestor
Scaffold不能作为根视图出现在布局中，大多用MaterialApp 作为根结点

import 'package:flutter/material.dart';

void main() {
  runApp(Bird());
}

class Bird extends StatefulWidget {
  @override
  _BirdState createState() => _BirdState();
}

class _BirdState extends State<Bird> {
  String value = 'fly...';
  void _onPressed() {
    setState(() {
      value = 'sleep...';
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            width: 100,
            height: 100,
            child: Column(
              children: <Widget>[
                Text('$value'),
                TextButton(
                  onPressed: _onPressed,
                  child: Text("press"),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}