Flutter：如何在左側添加一個小部件，在一行的中心添加另一個小部件

我想將一個 Text 小部件與一行的中心對齊，并且我還希望在同一行的左側有一個 Button 小部件。文本小部件被一個擴展的小部件包圍，因此它占據了按鈕留下的其余空間。

以下是我目前擁有的：

紅線代表螢屏的中間，Text 小部件應該在它的正上方。下面是我的代碼：

final double _buttonTextSize = 20.0;
  final double _buttonWidth = 90.0;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Container(
                  padding: const EdgeInsets.all(8.0),
                  child: _backButton(),),
              Expanded(
                child: Text(
                  'Encryption',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 30.0,
                    color: MyThemeColors.textTitle(),
                    fontWeight: FontWeight.w400,
                  ),
                ),
              ),
            ],
          ),
          Center(
            child: Container(color: Colors.red, height: 100, width: 5),
          )
        ],
      ),
    );
  }

  Button _backButton() {
    return Button(
      style: MyButtonStyles.defaultStyle(),
      child: Container(
        width: _buttonWidth,
        padding: const EdgeInsets.symmetric(vertical: 6.0, horizontal: 4.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Padding(
              padding: EdgeInsets.only(right: 4.0),
              child: Icon(FluentIcons.back, size: 22.0),
            ),
            Text(
              'Back',
              style: TextStyle(
                color: MyThemeColors.textTitle(),
                fontSize: _buttonTextSize,
              ),
            ),
          ],
        ),
      ),
      onPressed: () {
        Navigator.pop(context);
      },
    );
  }

uj5u.com熱心網友回復：

對我來說，我有兩個選擇：

1. 使用 LayoutBuilder 正確計算按鈕的大小并填充它。

   Contrait.maxWith 為您提供空間大小，您可以使用螢屏大小（或外部的另一個 LayoutBuilder 小部件以獲得父大小）。

2. 使用 Stack 將按鈕放在文本上方。無需計算：D

對我來說，最好的選擇是選項（2）。這是一些測驗代碼（對不起，您提供的代碼有一些自定義小部件（按鈕，MyButtonStyles ...），不能復制/粘貼運行，所以我需要創建新的）。

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Column(
        children: const [
          OnlyText(),
          Divider(),
          OptionOne(),
          Divider(),
          OptionTwo(),
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Material(
      child: SizedBox(
        height: 100,
        child: Center(child: Text("this one is in middle")),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Material(
      child: SizedBox(
        width: double.infinity,
        height: 100,
        child: Row(children: [
          Container(
            color: Colors.green,
            height: 100,
            child: const Center(child: Text('back button')),
          ),
          Expanded(
            child: LayoutBuilder(builder: (context, constrait) {
              final padding =
                  (MediaQuery.of(context).size.width - constrait.maxWidth);
              return Padding(
                padding: EdgeInsets.only(right: padding),
                child: const Center(child: Text('center screen')),
              );
            }),
          )
        ]),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Align(
        alignment: Alignment.topCenter,
        child: Container(
          width: double.infinity,
          height: 100,
          padding: const EdgeInsets.all(0),
          child: Stack(
            // <---- Here you go, a stack will help you
            children: [
              Row(
                children: [
                  Container(
                    color: Colors.green,
                    child: const Center(child: Text('back button')),
                  ),
                ],
              ),
              const Center(child: Text('center screen')),
            ],
          ),
        ),
      ),
    );
  }
}

這是結果：

標籤：扑 颤振布局 流利的用户界面

上一篇：FlutterFirebase：用戶嘗試使用現有電子郵件注冊時出錯

下一篇：使用和不使用引數導航到Flutter中的另一個頁面