外边框颜色 Flutter

Question

我面临下一个问题，我在Stack中有元素，我希望 iPhone 用户在向上滚动时看到紫色，在向下滚动时看到白色

我有下一个结构：

  Widget build(BuildContext context) {
    return Scaffold(
      body: WillPopScope(
        child: ListView(
          children: [
            Container(
              child: Stack(
                children: [
                  ...
                ],
              ),
            ),
          ],
        ),
      ),
    );

如果我直接改变脚手架的颜色，它会改变两侧，顶部和底部。 我希望顶部是紫色，底部是白色

Answer 1

通过使用 SliverAppBar，我实现了你想要的。
我想知道这是您想要的完美解决方案。
您需要实现顶部布局（标题、引导按钮、图像...）

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
  }

  List<Widget> bodyItems = [
    SizedBox(height: 50),
    Text(
      'NMR',
      textAlign: TextAlign.center,
      style: TextStyle(
        fontSize: 25,
      ),
    ),
    SizedBox(height: 50),
    Text(
      '+00 000 000 00 00',
      textAlign: TextAlign.center,
      style: TextStyle(
        fontSize: 15,
      ),
    ),
    SizedBox(height: 50),
    Text(
      'Text Text Text',
      textAlign: TextAlign.center,
      style: TextStyle(
        fontSize: 15,
      ),
    ),
    Padding(
      padding: EdgeInsets.symmetric(vertical: 20, horizontal: 100),
      child: LinearProgressIndicator(
        value: 50,
        semanticsLabel: 'Linear progress indicator',
      ),
    ),
    Text(
      'Text Text Text',
      textAlign: TextAlign.center,
      style: TextStyle(
        fontSize: 15,
      ),
    ),
    SizedBox(height: 50),
    Padding(
      padding: EdgeInsets.symmetric(horizontal: 50),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            'Text Text Text',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 12,
            ),
          ),
          Text(
            'Text Text Text',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 12,
            ),
          ),
        ],
      ),
    ),
    SizedBox(height: 400),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.yellow,
      body: CustomScrollView(
        physics: BouncingScrollPhysics(),
        slivers: [
          SliverAppBar(
            expandedHeight: 250,
            collapsedHeight: 250,
            stretch: true,
            backgroundColor: Color(0XFF7861AA),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(50),
                bottomRight: Radius.circular(50),
              ),
            ),
            flexibleSpace: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                SizedBox(
                  height: 20,
                ),
                Text('Title'),
                Icon(
                  Icons.home,
                  color: Colors.blue,
                  size: 160.0,
                ),
              ],
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (_, int index) {
                return bodyItems[index];
              },
              childCount: bodyItems.length,
            ),
          ),
        ],
      ),
    );
  }
}