我希望能够在一个页面中包含多个小部件，但它不起作用。我想要像下图这样的容器。它只允许我发短信？

Question

这是下面的代码，如果您至少可以尝试一下，将不胜感激。谢谢 | 我正在尝试创建一个应用程序，我可以在一个页面中包含多个小部件。我想让应用程序有点像下面的图片：

我希望小部件看起来像或相似

这就是我的应用程序空白的样子

如果你们能帮我弄清楚我需要做什么，那我将不胜感激。 |另外，我已经关注了这个tutorial。但是，大家可以看到他只有一串文字，“Hello”，“CART”，“MENUE”，“SETTING”，“FAVORITES”，都是文字串。我想在此页面内制作小部件，如第一张图片。拜托，在过去的 4 个半星期里，我一直在努力解决这个问题，但我不知道如何让它成为可能。

import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

@override
State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
final List<Widget> _options = [
  const _HomeScreenPage(),
  const _chatScreenPage(),
  const _locateScreenPage(),
  const _locationScreenPage(),
  const _profileScreenPage(),
];

int _currentIndex = 0;
@override
Widget build(BuildContext context) {
 return Scaffold(
  appBar: AppBar(
    title: const Text(
      '               S|D',
      style: TextStyle(
        fontSize: 48,
        fontFamily: 'Subway',
      ),
    ),
    elevation: 0,
    backgroundColor: Colors.black,
    foregroundColor: Colors.cyan,
  ),
  body: Container(
    color: Colors.black87,
    child: Center(
        child: Text(
          _options[_currentIndex],
          style: const TextStyle(
              color: Colors.cyanAccent,
              fontWeight: FontWeight.bold,
              fontSize: 40),
        ),
        ),
  ),
  bottomNavigationBar: CurvedNavigationBar(
    buttonBackgroundColor: Colors.black54,
    backgroundColor: Colors.black87,
    color: Colors.black,
    items: const <Widget>[
      Icon(
        Icons.home,
        color: Colors.cyan,
      ),
      Icon(
        Icons.people_sharp,
        color: Colors.cyanAccent,
      ),
      Icon(
        Icons.my_location_sharp,
        color: Colors.cyanAccent,
      ),
      Icon(
        Icons.car_repair,
        color: Colors.cyanAccent,
      ),
      Icon(
        Icons.person_pin,
        color: Colors.cyan,
      ),
    ],
    onTap: (index) {
      setState(() {
        _currentIndex = index;
      });
    },
  ),
);
}
}

class _HomeScreenPage extends StatelessWidget {
const _HomeScreenPage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
 return Column(
  children: [
    Expanded(
        flex: 7,
        child: Container(
          color: Colors.cyan,
        ))
  ],
);
}
}

class _chatScreenPage extends StatelessWidget {
const _chatScreenPage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
  return Container();
}
}

class _locateScreenPage extends StatelessWidget {
const _locateScreenPage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Container();
}
}

class _locationScreenPage extends StatelessWidget {
const _locationScreenPage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Container();
}
}

class _profileScreenPage extends StatelessWidget {
const _profileScreenPage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Container();
}
}

Answer 1

您可以在主页构建方法中使用 IndexedStack 小部件

替换

  body: Container(
color: Colors.black87,
child: Center(
    child: Text(
      _options[_currentIndex],
      style: const TextStyle(
          color: Colors.cyanAccent,
          fontWeight: FontWeight.bold,
          fontSize: 40),
    ),
    ),
),

至

   body: IndexedStack(
    children: _options,
    index: _currentIndex,
  ),

我希望能够在一个页面中包含多个小部件，但它不起作用。我想要像下图这样的容器。它只允许我发短信？

I want to be able to have multiple widgets in a page, it isn't working though. I want to have containers like the image below. It only allows me text?

flutter

dart

flutter-layout