如何删除行子项之间的这些行

Question

我是 flutter 的新手，我正在尝试将屏幕分成三个部分，这是我的尝试：

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

  @override
  Widget build(BuildContext context) {
    return Row(children: [
      const Expanded(
        flex: 1,
        child: Scaffold(
          body: Center(child: Text("Left")),
        ), // Scaffold
      ), // Expanded
      Expanded(
        flex: 2,
        child: Scaffold(
          appBar: AppBar(),
          body: const Center(child: Text("Middle")),
        ), // Scaffold
      ), // Expanded
      const Expanded(
        flex: 1,
        child: Scaffold(
          body: Center(child: Text("Right")),
        ), // Scaffold
      ) // Expanded
    ]);
  }
}

和main.dart看起来像：

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

结果如下：

我莫名其妙地得到了这些垂直线，我该如何摆脱它们？

Answer 1

欢迎使用 Flutter

这些行是您在行中每个 Expanded 小部件中使用的 Scaffold 小部件的边界。

现在，与其寻找一种方法来移除这些边框线，我建议您了解更多关于 Flutter 中的 Scaffold 小部件的信息

由于是Flutter新手，所以使用Scaffoldwidget的目的，在official docs中有如下说明：

Implements the basic material design visual layout structure.

This class provides APIs for showing drawers and bottom sheets.

所以换句话说，我们使用 Scaffold Widget 作为基本的 canvas 屏幕，具有一些属性来实现流行的布局设计，例如 AppBar, BottomNavigationBar、FloatingActionButton、等等...

然后，我们在屏幕中使用一次，设置基本布局，不需要为屏幕的每个子部分使用多次

那么你的 HomePage 代码应该是这样的：

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(children: [
        const Expanded(
          flex: 1,
          child: Center(child: Text("Left")),
        ), // Expanded
        Expanded(
          flex: 2,
          child: Column(
            children: [
              AppBar(),
              const Expanded(
                child: Center(child: Text("Middle")),
              ),
            ],
          ),
        ),
        const Expanded(
          flex: 1,
          child: Center(child: Text("Right")),
        )
      ]),
    );
  }
}

如何删除行子项之间的这些行

How to remove these lines between Row children

windows

flutter

dart