將應用程式螢屏分成兩半和/或部分時遇到問題-有解無憂

下面的代碼是我的應用程式的許多頁面之一。我正在嘗試使用 LayoutBuilder 設定此頁面，以便它像測驗頁面一樣作業，下半部分/部分將容納 3 到 4 個文本按鈕，上半部分/部分將容納問題并可能顯示圖片。我做了一些研究，發現您可以使用 LayoutBuilder 將容器設定為螢屏的一半。但是，當我在這里嘗試使用此代碼執行此操作時，拋出了很多例外。所以我想知道是否有更好的方法將螢屏分成兩半（或者可能是 1/4、1/4 和 1/2）以進行類似測驗的布局。謝謝您的幫助！

測驗.dart

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

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Quiz'),
),
body: Column(
children: [
Align(alignment: Alignment.topCenter,
child: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Container(
height: constraints.maxHeight / 2,
// widthdouble.infinity,
);
},
)),
Align(alignment: Alignment.topCenter,
child: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Container(
height: constraints.maxHeight / 2,
// widthdouble.infinity,
color: const Color.fromRGBO(155, 205, 255, 0.8),
child: Column(children: [
/* TextButton(onPressed: onPressed, child: child),
TextButton(onPressed: onPressed, child: child),
TextButton(onPressed: onPressed, child: child), */
Text('Option A'),
Text('Option B'),
Text('Option C'),
],),
);
},
)),

],
));
}
}

uj5u.com熱心網友回復：

您可以嘗試LayoutBuilder向上移動，以便您可以為您的子級使用約束Column：

將應用程式螢屏分成兩半和/或部分時遇到問題

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Quiz')),
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          return Column(
            children: [
              Container(
                height: constraints.maxHeight / 2,
                color: Colors.green.shade300,
              ),
              Container(
                height: constraints.maxHeight / 2,
                color: Colors.blue.shade300,
              ),
            ],
          );
        },
      ),
    );
  }
}

uj5u.com熱心網友回復：

它可以在擴展小部件的幫助下以簡單的方式完成。使用您需要的 flex 創建 2 個擴展小部件，以便您可以根據需要劃分螢屏。

enter code here

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          flex: 1,
          child: Container(
            color: Colors.amberAccent,
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(
            color: Colors.lightBlue,
          ),
        ),
      ],
    );
  }
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/431659.html

標籤：扑镖颤振布局

上一篇：將物件轉換為可編碼物件失敗：“LeadSource”實體

下一篇：如何讓顫振類方法回傳未來？