Flutter：- 向 Widget Tree 添加新的 Widget，使其他 Widget 消失

Question

嘿，我一直在尝试在 flutter 的列小部件中添加多个小部件，但是每次我添加第二个小部件时，第一个小部件都会消失，就好像列小部件崩溃一样，我使用vscode在我的 android 手机上运行它，调试控制台显示没有错误任何。 我附上下面的代码。

import 'package:flutter/material.dart';

import 'package:thejointapp/Appbar.dart';
import 'package:thejointapp/Grid.dart';
import 'package:thejointapp/SubjectSelector.dart';

void main() => runApp(Home());

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
   return HomeState();
  }
}

class HomeState extends State<Home> {
Widget build(BuildContext context) {
return MaterialApp(
    title: 'Home',
    debugShowCheckedModeBanner: false,
    theme: ThemeData(
      primaryColor: Colors.red,
      accentColor: Color(0xFFFEF9EB),
    ),
    home: Scaffold(
      appBar: Appbar(),
      body: Column(
        children: <Widget>[
          SubjectSelector(),
          GridView.count(
            crossAxisCount: 2,
            children: List.generate(100, (index) {
              return (Center(
                  child: Text(
                'Item $index',
                style: Theme.of(context).textTheme.headline,
                // TextStyle(
                //     color: Colors.white,
                //     fontSize: 20.0,
                //     fontWeight: FontWeight.bold),
              )));
            }),
          )
        ],
      ),
    ));
}
}

Answer 1

您只需要使用 Gridview 上的Expand小部件，如下所示

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class HomeScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return HomeState();
  }
}

class HomeState extends State<HomeScreen> {
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Home',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primaryColor: Colors.red,
          accentColor: Color(0xFFFEF9EB),
        ),
        home: Scaffold(
          body: Column(
            children: <Widget>[
              Container(
                height: MediaQuery.of(context).size.height * 0.1,
                color: Colors.green,
              ),
              Expanded(
                child: GridView.count(
                  crossAxisCount: 2,
                  children: List.generate(100, (index) {
                    return (Center(
                        child: Text(
                      'Item $index',
                      style: Theme.of(context).textTheme.headline,
                      // TextStyle(
                      //     color: Colors.white,
                      //     fontSize: 20.0,
                      //     fontWeight: FontWeight.bold),
                    )));
                  }),
                ),
              ),
              Container(
                height: MediaQuery.of(context).size.height*0.1,
                color: Colors.yellow,
              ),
            ],
          ),
        ));
  }
}

output 将跟随

并使用gridview和其他小部件为全屏滚动写另一个答案。 为此，您需要使用带有Silver的CustomScrollView ，如下所示

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

    class HomeScreen extends StatefulWidget {
      @override
      State<StatefulWidget> createState() {
        // TODO: implement createState
        return HomeState();
      }
    }

    class HomeState extends State<HomeScreen> {
      Widget build(BuildContext context) {
        return MaterialApp(
            title: 'Home',
            debugShowCheckedModeBanner: false,
            theme: ThemeData(
              primaryColor: Colors.red,
              accentColor: Color(0xFFFEF9EB),
            ),
            home: Scaffold(
                appBar: new AppBar(),
                body: CustomScrollView(
                  slivers: [
                    SliverToBoxAdapter(
                      child: Container(
                        color: Colors.green,
                        height: MediaQuery.of(context).size.height*0.2,
                        child: Center(
                          child: Text("Top"),
                        ),
                      )
                    ),

                    SliverGrid(
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 2,
                        childAspectRatio: 1.5,
                      ),
                      delegate: SliverChildBuilderDelegate(
                        (context, index) => Container(
                          margin: EdgeInsets.all(5.0),
                          color: Colors.yellow,
                        ),
                        childCount: 10,

                      ),
                    ),

                    SliverToBoxAdapter(
                        child: Container(
                          color: Colors.green,
                          height: MediaQuery.of(context).size.height*0.2,
                          child: Center(
                            child: Text("Bottom"),
                          ),
                        )
                    ),
                  ],
                )));
      }
    }

和下面程序的output如下