如何创建带有分隔线和位于分隔线之间的按钮的 Flutter UI？

Question

我正在开发一个 Flutter 项目，需要有关编码 UI 的指导，该 UI 包含一个分隔线以及位于分隔线之间的按钮。有人可以提供代码示例或分享有关在 Flutter 中实现此布局的最佳方法的见解吗？

/// DIVIDER
                    // Todo: Button along with Divider
                    const Divider(
                      height: 16,
                      thickness: 2,
                      color: Color(0xffeaecf0),
                    ),

Answer 1

您可以使用

Stack

小部件！

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Main Page'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            color: Colors.teal,
            height: 100,
          ),
          Stack(
            alignment: Alignment.centerRight,
            children: [
              const Divider(color: Colors.grey),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: IconButton(
                  onPressed: () {},
                  icon: const Icon(Icons.add),
                  style: IconButton.styleFrom(
                    backgroundColor: Colors.white,
                    shape: const CircleBorder(
                      side: BorderSide(
                        color: Colors.grey,
                        width: 2,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
          Container(
            color: Colors.amber,
            height: 100,
          ),
        ],
      ),
    );
  }

输出将是这样的：

Answer 2

这就是

Stack

小部件的用途：将小部件堆叠在一起。

您可以使用

Positioned

的参数来获得所需的输出：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: Scaffold(
        backgroundColor: Colors.red,
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 1000,
      child: Stack(
        alignment: Alignment.centerRight,
        children: [
          // divider
          Divider(
            color: Colors.white,
            thickness: 2,
          ),
          // button
          Positioned(
            right: 50,
            child: FloatingActionButton(
              onPressed: () {},
              child: Icon(Icons.add),
            ),
          ),
        ],
      ),
    );
  }
}