Question

我正在设计一个简单的屏幕。我想做到这一点

如何删除topLeft边框。我尝试使用边框显示仅一个边框，但显示错误，无法更改另一个然后统一。我是否删除了应用栏，然后堆叠了小部件。请告诉我我做错了什么。我的代码是

{
     "dept_id":11,
     "dept_name":"XYZ",
     "description":"decs",
     "emp_list":[
{
      "emp_name":"asdfg",
      "emp_id":121,
      "qualification":"MBA",
      "research_field":"AI",
}
.....
]
}
.......

Answer 1

这是a known "issue"。问题在于，一旦指定了边界半径，您将不知道边界的起点和终点。因此，抖动无法将边框颜色仅分配给某些边框。

在我尝试过的所有情况下，唯一对您有用的技巧是堆叠2个容器，背面的一个容器用来做边框。

这里是实现：

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SendScreen(),
      ),
    );
  }
}

class SendScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
    return Scaffold(
      drawer: Drawer(),
      key: _scaffoldKey,
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(100.0),
        child: AppBar(
          leading: IconButton(
              icon: Icon(Icons.access_alarm),
              onPressed: () {
                _scaffoldKey.currentState.openDrawer();
              }),
          actions: [
            Container(
              width: 50,
              decoration: BoxDecoration(
                color: const Color(0xff7c94b6),
                image: const DecorationImage(
                  image: NetworkImage(
                      'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
                  fit: BoxFit.cover,
                ),
                border: Border.all(
                  color: Colors.black,
                  // width: 8,
                ),
                borderRadius: BorderRadius.circular(12),
              ),
            ),
            SizedBox(
              width: 20,
            )
          ],
          shape: ContinuousRectangleBorder(
            borderRadius: BorderRadius.only(
              // bottomLeft: Radius.circular(30),
              bottomRight: Radius.circular(80),
            ),
          ),
          title: Text('Sliver AppBar'),
        ),
      ),
      body: CustomRectangle(
        borderSize: 20,
        borderColor: Colors.grey[300],
        height: 80.0,
        borderRadius: 80.0,
        child: Container(
          color: Colors.red,
        ),
      ),
    );
  }
}

class CustomRectangle extends StatelessWidget {
  final Widget child;
  final double height;
  final double borderSize;
  final double borderRadius;
  final Color borderColor;

  const CustomRectangle({
    Key key,
    @required this.height,
    @required this.borderSize,
    @required this.borderRadius,
    @required this.child,
    @required this.borderColor,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        ClipRRect(
          borderRadius: BorderRadius.only(bottomRight: Radius.circular(borderRadius)),
          child: Container(
            height: height + borderSize,
            decoration: BoxDecoration(
              color: borderColor,
            ),
          ),
        ),
        ClipRRect(
          borderRadius: BorderRadius.only(bottomRight: Radius.circular(borderRadius)),
          child: Container(
            height: height,
            child: child,
          ),
        ),
      ],
    );
  }
}

看看CustomRectangle，这是我的自定义小部件，可以解决您的问题。您可以从那里扩展。

我怎样才能在颤抖中获得边框的侧面颜色

1 个答案: