我是新手，我正在嘗試將螢屏分為三個部分，這是我的嘗試：
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,
);
}
}
結果如下：https ://i.imgur.com/Y1sRGIT.png 我不知從哪里得到了這些垂直線，請問我怎樣才能擺脫它們？
uj5u.com熱心網友回復：
歡迎來到 Flutter ??
這些行是Scaffold您在行中的每個Expanded小部件內使用的小部件的邊界。
現在不想尋找去除這些邊框線的方法，我建議你了解更多關于ScaffoldFlutter 中的小部件
由于您是 Flutter 新手，因此您必須了解使用Scaffold小部件的目標，官方檔案中對此進行了說明，如下所示：
實作了基本的材料設計視覺布局結構。
此類提供用于顯示抽屜和底頁的 API。
所以換句話說，我們使用ScaffoldWidget 作為螢屏的基本畫布，帶有一些屬性來實作流行的布局設計，例如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")),
)
]),
);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/482638.html