flutter - 如何使用列制作这种类型的 TextButton？在颤振中

Question

我尝试让任何人都知道或对此有任何想法的这种类型的文本按钮。
期望的结果

import 'package:audioplayers/audio_cache.dart';
import "package:flutter/material.dart";

class Mainhome extends StatefulWidget {
  Mainhome({Key key}) : super(key: key);

  @override
  _MainhomeState createState() => _MainhomeState();
}

class _MainhomeState extends State<Mainhome> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Expanded(
                child: FlatButton(
                  color: Colors.red,
                  child: Container(
                    child: Text(
                      'One',
                      style: TextStyle(color: Colors.white, fontSize: 25),
                    ),
                  ),
                  onPressed: () {
                    final player = AudioCache();
                    player.play('note1.wav');
                  },
                ),
              ),
              Expanded(
                child: FlatButton(
                  color: Colors.orange,
                  child: Container(
                    child: Text(
                      'Two',
                      style: TextStyle(color: Colors.white, fontSize: 25),
                    ),
                  ),
                  onPressed: () {
                    final player = AudioCache();
                    player.play('note2.wav');
                  },
                ),
              ),
              Expanded(
                child: FlatButton(
                  color: Colors.purple,
                  child: Container(
                    child: Text(
                      'Three',
                      style: TextStyle(color: Colors.white, fontSize: 25),
                    ),
                  ),
                  onPressed: () {
                    final player = AudioCache();
                    player.play('note3.wav');
                  },
                ),
              ),
              Expanded(
                child: FlatButton(
                  color: Colors.teal,
                  child: Container(
                    child: Text(
                      'Four',
                      style: TextStyle(color: Colors.white, fontSize: 25),
                    ),
                  ),
                  onPressed: () {
                    final player = AudioCache();
                    player.play('note4.wav');
                  },
                ),
              ),
              Expanded(
                child: FlatButton(
                  color: Colors.yellow,
                  child: Container(
                    child: Text(
                      'Five',
                      style: TextStyle(color: Colors.white, fontSize: 25),
                    ),
                  ),
                  onPressed: () {
                    final player = AudioCache();
                    player.play('note5.wav');
                  },
                ),
              ),
              Expanded(
                child: FlatButton(
                  color: Colors.green,
                  child: Container(
                    child: Text(
                      'Six',
                      style: TextStyle(color: Colors.white, fontSize: 25),
                    ),
                  ),
                  onPressed: () {
                    final player = AudioCache();
                    player.play('note6.wav');
                  },
                ),
              ),
              Expanded(
                child: FlatButton(
                  color: Colors.blue,
                  child: Container(
                    child: Text(
                      'Seven',
                      style: TextStyle(color: Colors.white, fontSize: 25),
                    ),
                  ),
                  onPressed: () {
                    final player = AudioCache();
                    player.play('note7.wav');
                  },
                ),
              ),
              Expanded(
                child: TextButton(
                  child: Container(
                    child: Text(
                      'Seven',
                      style: TextStyle(color: Colors.white, fontSize: 25),
                    ),
                  ),
                  style: ButtonStyle(
                    backgroundColor:
                        MaterialStateProperty.all<Color>(Colors.green),
                  ),
                  onPressed: () {
                    final player = AudioCache();
                    player.play('note7.wav');
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

标签： flutterflutter-layoutflutter-dependenciesflutter-animationflutter-test

Answer 1

你的 UI 看起来像一个不错的钢琴键盘，对吧？这是一个你可以尝试的骨架。简单来说你可以使用StackandPositioned来实现你想要的 UI。

完整示例代码：

import 'package:audioplayers/audio_cache.dart';
import "package:flutter/material.dart";

main() {
  runApp(MaterialApp(
    home: Mainhome(),
  ));
}

class Mainhome extends StatefulWidget {
  Mainhome({Key key}) : super(key: key);

  @override
  _MainhomeState createState() => _MainhomeState();
}

class _MainhomeState extends State<Mainhome> {
  double adjustment = 50;
  int _currentIndex = 0;
  int keySizeNumber = 7;
  double bigKeySize;
  double smallKeySize;

  @override
  Widget build(BuildContext context) {
    bigKeySize = MediaQuery.of(context).size.height / keySizeNumber;
    smallKeySize = bigKeySize * 0.6;

    return MaterialApp(
      home: SafeArea(
        child: Container(
          color: Colors.white,
          padding: EdgeInsets.symmetric(vertical: 10),
          child: Stack(
            children: [
              Column(
                children: List<Widget>.generate(7, (index) => _buildBigKey()),
              ),
              Positioned(
                top: bigKeySize * 0.6,
                child: _buildSmallKey(),
              ),
              Positioned(
                top: bigKeySize * 0.6 * 2 + 50,
                child: _buildSmallKey(),
              ),
              Positioned(
                top: bigKeySize * 0.6 * 5 + 50,
                child: _buildSmallKey(),
              ),
              Positioned(
                top: bigKeySize * 0.6 * 7 + 25,
                child: _buildSmallKey(),
              ),
              Positioned(
                top: bigKeySize * 0.6 * 9 - 10,
                child: _buildSmallKey(),
              ),
            ],
          ),
        ),
      ),
    );
  }

  _buildBigKey() {
    return Expanded(
      child: FlatButton(
        child: Container(
          alignment: Alignment.center,
          height: bigKeySize,
          width: MediaQuery.of(context).size.width,
          decoration: BoxDecoration(
              border: Border.all(color: Colors.red), color: Colors.white),
          child: Text(
            'Key',
            style: TextStyle(color: Colors.red, fontSize: 25),
          ),
        ),
        onPressed: () {
          final player = AudioCache();
          player.play('note1.wav');
        },
      ),
    );
  }

  _buildSmallKey() {
    return FlatButton(
      child: Container(
        alignment: Alignment.center,
        height: smallKeySize,
        width: MediaQuery.of(context).size.width * 0.7,
        decoration: BoxDecoration(
            border: Border.all(color: Colors.red), color: Colors.white),
        child: Text(
          'Key',
          style: TextStyle(color: Colors.red, fontSize: 25),
        ),
      ),
      onPressed: () {
        final player = AudioCache();
        player.play('note1.wav');
      },
    );
  }
}

结果：